Как изменить маркеры при изменении масштаба в API карты Google
1 ответ
Это должно быть довольно просто. Я взглянул на ваш код, и похоже, что вы не ссылаетесь на свои маркеры. Это первое, что вам следует сделать.
Поэтому создайте массив markers :
var markers = [];
И в своей функции setMarkers () вставьте каждый новый маркер в этот массив:
markers.push(marker);
Теперь вы можете выполнять итерацию над вашими маркерами с помощью цикла for: for (i = 0; i
В идеале мы должны также хранить два значка каждого маркера в самом объекте маркера. Объекты JavaScript можно очень легко дополнить настраиваемыми свойствами. Для этого вы можете изменить функцию setMarkers () следующим образом:
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);
}
}
Наконец, похоже, что вы уже правильно обрабатываете событие zoom_changed . Прежде всего, я предлагаю проверить, изменился ли zoomLevel между 1 и 2 , чтобы не перебирать массив маркеров если в этом нет необходимости. Если есть изменение, просто вызовите метод setIcon () для каждого маркера и передайте настраиваемое свойство iconLevel1 или iconLevel2 в зависимости от zoomLevel:
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);
}
}
}
});
Вышеупомянутое должно работать, но вы можете захотеть реорганизовать цикл for следующим образом, используя нотацию индекса вместо нотации точки для доступа к свойствам маркеров:
for (i = 0; i < markers.length; i++) {
markers[i].setIcon(markers[i]['iconLevel' + zoomLevel]);
}