So ändern Sie die Markierungen auf Zoom ändern Sie in Google Map api

Question

Ich habe eine Karte und ich möchte das Markerbild ändern, wenn der Zoom größer als 5 ist. Ich weiß, wie Zoomänderung zu erkennen, aber ich don ' t sehen, wie man das Bild ändert.

Answer 1

Das sollte ziemlich einfach sein. Ich habe Ihrem Code einen Blick zugeworfen und es sieht so aus, als ob Sie keinen Hinweis auf Ihre Marker haben. Dies ist das erste, was Sie tun sollten.

daher eine markers Array erstellen:

var markers = []; 

Und in Ihrer setMarkers() Funktion, jeden neuen Marker in diesen Array schieben:

markers.push(marker); 

Jetzt können Sie mit einem über den Marker iterieren für Schleife: for (i = 0; i < markers.length; i++).

Idealerweise sollten wir auch die zwei Symbole jedes Markers im Marker-Objekt selbst speichern. JavaScript-Objekte können sehr einfach mit benutzerdefinierten Eigenschaften erweitert werden. Um dies zu tun, können Sie Ihre setMarkers() Funktion wie folgt ändern:

function setMarkers(map, map_bounds, locations, iconLevel1, iconLevel2) { 
    for (var i = 0; i < locations.length; i++) { 
    var loc = locations[i]; 
    var myLatLng = new google.maps.LatLng(loc[1], loc[2]); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: iconLevel1, // iconLevel1 by default 
     title: loc[0], 
     zIndex: loc[3] 
    }); 

    // Add custom properties to the marker object 
    marker.iconLevel1 = iconLevel1; 
    marker.iconLevel2 = iconLevel2; 

    // Add the new marker to the markers array 
    markers.push(marker); 

    map_bounds.extend(myLatLng); 
    } 
} 

Schließlich scheint es, dass Sie bereits Umgang mit dem zoom_changed Ereignis korrekt. Zuerst schlage ich vor zu überprüfen, ob die zoomLevel zwischen 1 und 2 gewechselt hat, um nicht durch das markers Array zu iterieren, wenn es keine Notwendigkeit gibt. Wenn es eine Änderung gibt, rufen Sie einfach die setIcon() Methode für jeden Marker, und übergeben Sie die benutzerdefinierte Eigenschaft iconLevel1 oder iconLevel2 auf dem zoomlevel je:

var zoomLevel = 1; 

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var i, prevZoomLevel; 

    prevZoomLevel = zoomLevel; 

    map.getZoom() < 5 ? zoomLevel = 1 : zoomLevel = 2; 

    if (prevZoomLevel !== zoomLevel) { 
    for (i = 0; i < markers.length; i++) { 
     if (zoomLevel === 2) { 
     markers[i].setIcon(markers[i].iconLevel2); 
     } 
     else { 
     markers[i].setIcon(markers[i].iconLevel1); 
     } 
    } 
    } 
}); 

Die oben arbeiten sollte, aber Sie können Ihre for-Schleife Refactoring wollen als folgt, the subscript notation instead of the dot notation mit den Eigenschaften der Marker zuzugreifen:

for (i = 0; i < markers.length; i++) { 
    markers[i].setIcon(markers[i]['iconLevel' + zoomLevel]); 
} 

Answer 2

ich mag an Code nicht schreiben viele so löste ich das für mein eigenes Projekt auf diese Weise:

var z = myMap.getZoom(); 
var m = new google.maps.Marker({ 
    position : new google.maps.LatLng(myLat, myLng), 
    icon  : myMarker(z), 
    map   : myMap 
}); 

Die Funktion myMarker() ist eine benutzerdefinierte Funktion, bei der ich die Zoomstufe übergebe und normale Bilddaten zurücksende. Sie könnten einfach nur eine URL mit String-Verkettung generieren:

icon  : 'myMarkerIcon_level'+ z +'.png'