Question

基本上，我想在我的地图Marker上添加Label，它返回每个位置的BuddyPress成员的数量（只是MarkerClusterer正在生成的数字），然后当我点击它时重定向到一个具体的网址。

此外，我想调整MarkerClusterer号码将这些数字加在一起，而不是计算我内部的标记数量。

问题：我正在努力尝试调整插件Progress Map中包含的功能，而这个功能开发人员显然不会弄脏他的手。< / p>

无论如何，这是我想要的结果（红色点中的白色标签）：

我找到了通过以下代码检索每个位置的成员数量的方法：

                        <?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}}}

总结，这里有两到三件事：

能够在我的红点（标记）内插入标签（计数器）
调整MarkerClusterer插件以显示其他计数器的总数（如果我们取消缩放则动态显示），而不是显示其中的标记计数。
（附加）在WP＆＃34; Post＆＃34;中添加带有（？）符号的自定义链接。（但我应该可以使用ACF）。

地图来源：https://spanishblackgarlic.com/spanishblackgarlic/

Answer 1

因为你没有直接使用谷歌地图api，所以你很难得到帮助。我不知道它如何与wordpress一起工作，所以我无法帮助修改实际代码......但我认为你可以绕过一些东西。

1）对于带标签的标记，你有一个＆＃34; max＆＃34;用户？您可以使用自定义图像作为标记您可以做的是为每个数字设置1个图像标记...除非您有太多。如果是，您可以使用自动生成的图像，如mysite.com/genMarker.php?number=98。不是最难处理php。

2）对于markercluster，你也可以修改markerclusterer，但我可以建议另一种方式： - 您继续添加＆＃34;分组＆＃34;具有自定义标签的标记（10个用户的1个标记），但您不能将它们推送到markerclusterer - 为每个用户添加1个标记（例如，如果您有10个用户，则在同一个地方添加10个标记）...使用透明图像标记：将它们添加到您的聚类器

然后你应该对集群有正确的行为，而不必修改它的核心。

我不知道你是否有可能选择是否添加标记到群集......但这有点容易。我知道它很难看，但我认为它可以起作用;）

WordPress - 谷歌地图API标签/进度图+ BuddyPress会员数

1 个答案: