基本上,我想在 map Marker上添加Label,该Label返回每个位置的BuddyPress成员的数量(就像MarkerClusterer产生的数字一样),然后当我单击它时重定向到特定的Url。

另外,我想调整MarkerClusterer数字以将这些数字加在一起,而不是计算内部的标记数。

问题:我正在努力调整插件Progress Map中包含的功能,而该开发人员显然不想打扰他的双手。

无论如何,这是我想要的结果(红色 Blob 中的白色标签):

javascript - WordPress-Google Map API标签/Progress Map + BuddyPress成员(member)数-LMLPHP

我找到了使用以下代码检索每个位置的成员数量的方法:

                        <?php global $bp;
                        if ( bp_has_members( bp_ajax_querystring( 'members' ). '&per_page='.sq_option('buddypress_perpage') ) ) :
                            $region = array();
                            while ( bp_members() ) : bp_the_member();
                                $region[] = xprofile_get_field_data( 'Region' , bp_get_member_user_id() );//fetch the text for location
                            endwhile;
                        endif; ?>
                        /* print_r(array_count_values(array_map('strtolower', $region))); */

这是调用,用于创建对象标记:
                                /**
                             * Create the pin object */

                            var marker_object = cspm_new_pin_object(<?php echo $l; ?>, '<?php echo $post_id; ?>', <?php echo $lat; ?>, <?php echo $lng; ?>, '<?php echo $implode_post_categories; ?>', map_id, '<?php echo $marker_img_by_cat; ?>', '<?php echo $marker_img_size; ?>', '<?php echo $is_child; ?>');
                            json_markers_data.push(marker_object);

这是函数cpsm_new_pin_object (我猜这是使用Google Maps API的地方):
    function cspm_new_pin_object(i, post_id, lat, lng, post_categories, map_id, marker_img, marker_size, is_child){

    /**
     * [@map_script_id] | Used only to get map options from the PHP option wp_localize_script()
     * @since 3.0 */
    var map_script_id = (typeof progress_map_vars.map_script_args[map_id] !== 'undefined') ? map_id : 'initial';

    post_lat_lng_coords[map_id][post_id] = lat+'_'+lng;

    // Create an object of that post_id and its categories/status for the faceted search
    post_lat_lng_coords[map_id]['post_id_'+post_id] = {};
    post_ids_and_child_status[map_id][lat+'_'+lng] = is_child;

    // Get the current post categories
    var post_category_ids = (post_categories != '') ? post_categories.split(',') : '';

    // Collect an object of all posts in the map and their categories
    // Useful for the faceted search & the search form
    post_lat_lng_coords[map_id]['post_id_'+post_id][0] = post_category_ids;

    // By default the marker image is the default Google map red marker
    var marker_icon = '';

    // If the selected marker is the customized type
    if(progress_map_vars.map_script_args[map_script_id]['defaultMarker'] == 'customize'){

        // Get the custom marker image
        // If the marker categories option is set to TRUE, the marker image will be the uploaded marker category image
        // If the marker categories option is set to FALSE, the marker image will be the default custom image provided by the plugin
        var marker_cat_img = marker_img;

        // Marker image size
        var marker_img_width = (progress_map_vars.map_script_args[map_script_id]['retinaSupport'] == "true") ? parseInt(marker_size.split('x')[0])/2 : parseInt(marker_size.split('x')[0]);
        var marker_img_height = (progress_map_vars.map_script_args[map_script_id]['retinaSupport'] == "true") ? parseInt(marker_size.split('x')[1])/2 : parseInt(marker_size.split('x')[1]);

        // Marker image anchor point
        var anchor_y = marker_img_height/2;
        var anchor_x = marker_img_width/2;
        var anchor_point = null;

        if(progress_map_vars.map_script_args[map_script_id]['marker_anchor_point_option'] == 'auto')
            anchor_point = new google.maps.Point(anchor_x, anchor_y);
        else if(progress_map_vars.map_script_args[map_script_id]['marker_anchor_point_option'] == 'manual'){
            if(progress_map_vars.map_script_args[map_script_id]['retinaSupport'] == "true"){
                anchor_point = new google.maps.Point(
                    progress_map_vars.map_script_args[map_script_id]['marker_anchor_point'].split(',')[0]/2,
                    progress_map_vars.map_script_args[map_script_id]['marker_anchor_point'].split(',')[1]/2
                );
            }else anchor_point = new google.maps.Point(progress_map_vars.map_script_args[map_script_id]['marker_anchor_point'].split(',')[0], progress_map_vars.map_script_args[map_script_id]['marker_anchor_point'].split(',')[1]);
        }

        // Add retina support
        marker_icon = new google.maps.MarkerImage(marker_cat_img, null, null, anchor_point, new google.maps.Size(marker_img_width,marker_img_height));

    }

    return pin_object = {latLng: [lat, lng], tag: 'post_id__'+post_id, id: post_id+'_'+is_child, options:{ optimized: false, icon: marker_icon, id: post_id, post_id: post_id, is_child: is_child }};

}

当然,他的缩小版即将推出:
cspm_new_pin_object(e,s,a,r,t,i,o,_,p){var n="undefined"!=typeof progress_map_vars.map_script_args[i]?i:"initial";post_lat_lng_coords[i][s]=a+"_"+r,post_lat_lng_coords[i]["post_id_"+s]={},post_ids_and_child_status[i][a+"_"+r]=p;var c=""!=t?t.split(","):"";post_lat_lng_coords[i]["post_id_"+s][0]=c;var m="";if("customize"==progress_map_vars.map_script_args[n].defaultMarker){var l=o,d="true"==progress_map_vars.map_script_args[n].retinaSupport?parseInt(_.split("x")[0])/2:parseInt(_.split("x")[0]),u="true"==progress_map_vars.map_script_args[n].retinaSupport?parseInt(_.split("x")[1])/2:parseInt(_.split("x")[1]),g=u/2,f=d/2,v=null;"auto"==progress_map_vars.map_script_args[n].marker_anchor_point_option?v=new google.maps.Point(f,g):"manual"==progress_map_vars.map_script_args[n].marker_anchor_point_option&&(v="true"==progress_map_vars.map_script_args[n].retinaSupport?new google.maps.Point(progress_map_vars.map_script_args[n].marker_anchor_point.split(",")[0]/2,progress_map_vars.map_script_args[n].marker_anchor_point.split(",")[1]/2):new google.maps.Point(progress_map_vars.map_script_args[n].marker_anchor_point.split(",")[0],progress_map_vars.map_script_args[n].marker_anchor_point.split(",")[1])),m=new google.maps.MarkerImage(l,null,null,v,new google.maps.Size(d,u))}return pin_object={latLng:[a,r],label:'B',tag:"post_id__"+s,id:s+"_"+p,options:{optimized:!1,icon:m,id:s,post_id:s,is_child:p}}}

在这里总结,2或3件事:
  • 能够在我的红点(标记)中插入标签(计数器)
  • 调整MarkerClusterer插件以显示其他计数器的总数(如果我们取消缩放则动态显示),而不显示其中的标记数。
  • (附加)在WP“Post”内添加带有(?)符号的自定义链接(但我应该可以使用ACF做到这一点)。

  • map 来源:https://spanishblackgarlic.com/spanishblackgarlic/

    最佳答案

    好吧,因为您没有直接使用google maps api,所以很难获得帮助。我不知道它如何与wordpress一起工作,所以我不禁要修改实际的代码...但是我认为您可以超越某些东西。

    1)对于标记的标记,您有“最大”用户吗?您可以为标记使用自定义图像。您可以做的是为每个数字使用一个图像标记...除非您有太多。如果是,则可以使用自动生成的图像,例如mysite.com/genMarker.php?number=98。这不是最难的事。

    2)也为markercluster,您可能可以修改markerclusterer,但我可以建议另一种方法:
    -您继续添加带有自定义标签的“分组”标记(1个标记可容纳10个用户),但不会将其推送到markerclusterer
    -您为每个用户添加1个标记(例如,如果您有10个用户,则在同一位置添加10个标记)...并添加透明图像标记:将它们添加到群集器中

    然后,您应该对群集具有正确的行为,而不必修改其核心。

    我不知道您是否可以选择"is"或“不”将标记添加到群集中……但这是一种简单的方法。我知道这很丑陋,但我认为它可以工作;)

    10-06 00:11