如何在谷歌地图api中更改缩放更改标记答案

【问题标题】：How to change markers on zoom change in google map api如何在谷歌地图api中更改缩放更改标记
【发布时间】：2011-03-12 16:47:58
【问题描述】：

我有一张地图，我想在缩放大于 5 时更改标记图像。
我知道如何检测缩放变化，但我不知道如何更改图像。

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

我不喜欢写很多代码，所以我用这种方式为自己的项目解决了这个问题：

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'

【讨论】：

【解决方案2】：

这应该很容易。我查看了您的代码，看起来您没有保留对标记的引用。这是您应该做的第一件事。

因此创建一个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() 方法，并根据zoomLevel 传递自定义属性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 循环，使用 the subscript notation instead of the dot notation 访问标记的属性：

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

【讨论】：