Как изменить маркеры на изменение масштаба в google map api

Ответ 1

Это должно быть довольно легко. Я посмотрел на ваш код, и похоже, что вы не храните ссылки на свои маркеры. Это первое, что вы должны сделать.

Поэтому создайте массив markers:

var markers = [];

И в вашей функции setMarkers(), нажмите каждый новый маркер в этот массив:

markers.push(marker);

Теперь вы сможете перебирать маркеры с помощью цикла for: for (i = 0; i < markers.length; 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, чтобы не перебирать массив markers, если нет необходимости. Если есть изменение, просто вызовите метод setIcon() для каждого маркера и передайте пользовательское свойство iconLevel1 или iconLevel2 в зависимости от масштабирования:

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

Ответ 2

Мне не нравится писать много кода, поэтому я решил это для своего собственного проекта таким образом:

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

Функция myMarker() - это настраиваемая функция, в которой я передаю уровень масштабирования и возвращаю данные обычного изображения. Вы можете легко создать URL-адрес, используя конкатенацию строк:

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