javascript - WordPress - Google Map API 标签/进度图 + BuddyPress 成员(member)数

Question

基本上，我想在我的 map 标记上添加标签，它返回我的 BuddyPress 的计数。每个位置的成员(就像 MarkerClusterer 生成的数字)以及当我点击它时重定向到特定的 Url。

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

问题:我正在努力尝试调整插件中包含的功能 Progress Map而这个开发者显然懒得弄脏他的手。

无论如何，这是我想要的那种结果(红点中的白色标签):

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

                        <?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“帖子”中添加带有 (?) 符号的自定义链接(但我应该可以使用 ACF 来完成)。

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

Answer 1

嗯，由于您不直接使用 google maps api，因此很难获得帮助。我不知道它如何与 wordpress 一起工作，所以我忍不住修改实际代码...但我认为您可以忽略一些事情。

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

2) 对于那里的 markercluster，您可能可以修改 markerclusterer，但我可以建议另一种方法:- 您继续添加带有自定义标签的“分组”标记(1 个标记用于 10 个用户)，但您不会将它们推送到 markerclusterer- 您为每个用户添加 1 个标记(即，如果您有 10 个用户，则在同一位置添加 10 个标记)...使用透明图像标记:您将它们添加到您的聚类器中

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

我不知道您是否可以选择"is"或“不”向集群添加标记……但这是一种更简单的方法。我知道这很难看，但我认为它可以工作；)