如何在谷歌地图api中更改缩放变化的标记

时间:2010-07-07 08:12:33

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

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

2 个答案:

答案 0 :(得分:30)

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

因此创建一个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事件。首先,我建议检查zoomLevel1之间的2是否发生了变化,以便在没有必要的情况下不迭代markers数组。如果有更改,只需为每个标记调用setIcon()方法,然后根据zoomLevel传递自定义属性iconLevel1iconLevel2

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

答案 1 :(得分:0)

我不喜欢编写大量代码,因此我以这种方式为自己的项目解决了这个问题:

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'