Как изменить маркеры при изменении масштаба в API карты Google

Question

У меня есть карта, и я хотел бы изменить изображение маркера, когда увеличение больше 5.Я знаю, как обнаружить изменение масштаба, но не вижу, как изменить изображение.

Answer 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 в зависимости от 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]);
}

Answer 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'