WordPress – Google Map API-Label / Fortschrittskarte + BuddyPress-Mitgliederzahl

Lesezeit: 8 Minuten

Benutzer-Avatar
bkseen

Grundsätzlich möchte ich Label auf meiner Karte Marker hinzufügen, die die Anzahl meiner zurückgibt BuddyPress Mitglieder pro Standort (nur eine Zahl, wie MarkerClusterer produziert) und wenn ich dann darauf klicke, wird zu einer bestimmten URL weitergeleitet.

Außerdem würde ich die gerne optimieren MarkerClusterer Nummer, um diese Zahlen zu addieren, anstatt die Anzahl der Marker zu zählen, die ich darin habe.

Das Problem: Ich habe Probleme beim Versuch, die im Plugin enthaltenen Funktionen zu optimieren Fortschrittskarte und der Entwickler von diesem macht sich offenbar nicht die Mühe, sich die Hände schmutzig zu machen.

Jedenfalls ist dies die Art von Ergebnis Ich möchte (die weiße Etiketten in den roten Punkten):

Geben Sie hier die Bildbeschreibung ein

Ich habe den Weg gefunden Abrufen der Anzahl meiner Mitglieder pro Standort mit folgendem Code:

                        <?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))); */

Hier ist der aufrufen, um den Objektmarker zu erstellen:

                                /**
                             * 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); 

Und hier die Funktion cpsm_new_pin_object (Ich denke, hier wird die Google Maps API verwendet):

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

}

Kommt natürlich in seinem Version minimieren:

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

Zusammenfassen2 oder 3 Dinge hier:

  • Ein Etikett (Zähler) in meine roten Punkte (Marker) einfügen können
  • Anpassung der MarkerClusterer Plugin, um die Summe der anderen Zähler (dynamisch, wenn wir die Zoomstufe aufheben) anstelle der Anzahl der darin enthaltenen Markierungen anzuzeigen.
  • (zusätzlich) füge einen benutzerdefinierten Link mit einem (?) Symbol in einem WP “Post” hinzu (aber ich sollte in der Lage sein, es damit zu tun ACF).

Kartenquelle: https://spanishblackgarlic.com/spanishblackgarlic/

Nun, es wird schwierig für Sie, Hilfe zu bekommen, da Sie die Google Maps-API nicht direkt verwenden. Ich weiß nicht, wie es mit WordPress funktioniert, also kann ich nicht helfen, den eigentlichen Code zu ändern … aber ich denke, Sie können einige Dinge übergehen.

1) Haben Sie für die beschriftete Markierung eine “maximale” Anzahl von Benutzern? Sie können ein benutzerdefiniertes Bild für die Markierung verwenden. Was Sie tun können, ist, 1 Bildmarkierung für jede Zahl zu haben … es sei denn, Sie haben zu viele. Wenn ja, können Sie ein automatisch generiertes Bild wie mysite.com/genMarker.php?number=98 verwenden. Nicht das Schwierigste, was man mit PHP machen kann.

2) Auch für den Markercluster dort können Sie wahrscheinlich markerclusterer ändern, aber ich kann einen anderen Weg vorschlagen: – Sie fügen weiterhin Ihre “gruppierten” Marker mit benutzerdefinierten Labels hinzu (1 Marker für 10 Benutzer), aber Sie schieben sie nicht an markerclusterer – Sie fügen 1 Marker für jeden Benutzer hinzu (dh 10 Marker an derselben Stelle, wenn Sie 10 Benutzer haben) … mit einem transparenten Bildmarker: Sie fügen sie Ihrem Clusterer hinzu

Dann sollten Sie das richtige Verhalten für Cluster haben, ohne den Kern davon ändern zu müssen.

Ich weiß nicht, ob Sie die Möglichkeit haben, Ja oder Nein zu wählen, um einen Marker zum Cluster hinzuzufügen … aber das ist ein bisschen einfacher. Ich weiß, es ist hässlich, aber ich denke, es könnte funktionieren 😉

  • Hallo Pierre. Danke für Ihr Interesse! Leider sind Ihre Lösungen überhaupt nicht dynamisch und ziemlich schlecht in der Entwicklung. Ich habe das gleiche für die Markierungen gedacht, aber es ist auch albern für die Wartung usw. Ich bin mir jedoch ziemlich sicher, dass dieses Plugin mit Google API v3 codiert ist. Wenn Sie also PHP zum Aufrufen der Karte verwenden, ändert WordPress das Verhalten nicht, sondern ruft nur die API auf Verwenden Sie es dann über eine Funktion. Ich habe auch an eine JS-Lösung gedacht, aber ich kann nicht herausfinden, wie ich meine “Marker-Bilder” auswählen soll. Wenn ich es könnte, denke ich, dass es eine ziemlich einfache Lösung mit JS ist.

    – bkseen

    28. Juli 2017 um 0:15 Uhr

  • Pierre, hast du eine Idee?

    – bkseen

    1. August 2017 um 23:55 Uhr

1227170cookie-checkWordPress – Google Map API-Label / Fortschrittskarte + BuddyPress-Mitgliederzahl

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy