Schalten Sie die Google Map -Markierungen nach Kategorie ein/aus

Question

Ich habe das unten cat: dataMarkers.cat. Ich bin ein bisschen verloren, wie man dies tatsächlich am besten macht. Ich denke MarkerManager für jede Kategorie? Würde ich jede Kategorie in ihrem eigenen MarkerManager -Array benötigen? Wie faktor dies mit MarkerClusterer?

var map;

function initialize() {
        var center = new google.maps.LatLng(39.632906,-106.524591);
        var options = {
          'zoom': 8,
          'center': center,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), options);

            <!--Load Markers-->
                    var markers = [];
                    for (var i = 0, dataMarkers; dataMarkers = data.markers[i]; i++) {
                      var latLng = new google.maps.LatLng(dataMarkers.lat, dataMarkers.lng);
                      var marker = new google.maps.Marker({
                        position: latLng,
                        title: dataMarkers.title,
                        date: dataMarkers.date,
                        time: dataMarkers.time,
                        desc: dataMarkers.desc,
                        img: dataMarkers.img,
                        add: dataMarkers.address,
                        cat: dataMarkers.cat,
                        map: map
                      });

            <!--Display InfoWindows-->    
                    var infowindow = new google.maps.InfoWindow({
                            content: " "
                          });
                          google.maps.event.addListener(marker, 'click', function() {
                            infowindow.setContent('<div id="mapCont"><img class="mapImg" src="'+this.img+'"/>' +
                                                  '<div class="mapTitle">'+this.title+'</div>' + 
                                                  '<div class="mapHead">Date: <div class="mapInfo">'+this.date+'</div>' +
                                                  '<div class="mapHead">Time: <div class="mapInfo">'+this.time+'</div>' +
                                                  '<p>'+this.desc+'</p></div>');
                            infowindow.open(map, this);
                          });

                      markers.push(marker);
                    }

            <!--Cluster Markers-->
                var markerClusterer = new MarkerClusterer(map, markers, {
                  maxZoom: 15,
                  gridSize: 50
                });

}

Answer 1

Ich empfehle Ihnen, alle Markierungen in einem Array aufzubewahren. Erstellen Sie ein Feld namens namens category auf jedem Marker und geben Sie ihm den richtigen Wert.

Wenn sich die Kategorie ändert marker.visible = true auf den in der richtigen Kategorie und marker.visible = false auf allen anderen.

In JavaScript ist es einfach, einem Objekt neue Felder dynamisch zuzuweisen. Sie würden einfach sagen:

var marker = new google.maps.Marker({
    position: latLng,
    title: dataMarkers.title,
    date: dataMarkers.date,
    time: dataMarkers.time,
    desc: dataMarkers.desc,
    img: dataMarkers.img,
    add: dataMarkers.address,
    cat: dataMarkers.cat,
    map: map
});
marker.category = THE_CATEGORY_IT_BELONGS_TO;

In der Markierung wird dann ein Feld aufgerufen category Solange es existiert.