使用缩放调整自定义图像标记大小 - Google Maps API v3

Question

我使用自定义图像作为Google Map API的图标/标记。我希望标记图像在用户放大地图时调整大小。

我采取了一些从这个问题的代码：Google Maps :: Changing icon based on zoom level

不幸的是，这个脚本只改变了最后经/纬标记在我的名单。我不确定为什么，有谁能指出我的错误？

下面的代码：

var locations = [ 
['Aaron Baddeley (130)',-25.274398,133.775136], 
['Adam Hadwin (176)',52.939916,-106.450864], 
['Adam Scott (7)',-26.65,153.066667], 
['Adilson da Silva (291)',-28.530554,30.895824], 
['Alejandro Canizares (167)',40.416775,-3.70379],]; 

var infowindow = new google.maps.InfoWindow({} 

var image = new google.maps.MarkerImage('images/marker11.gif', 
    new google.maps.Size(9,9), //size 
    null, //origin 
    null, //anchor 
    new google.maps.Size(9,9) //scale 
); 

var marker, i; 
for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: image, 
}); 

//when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area 
google.maps.event.addListener(map, 'zoom_changed', function() { 
    var pixelSizeAtZoom4 = 9; //the size of the icon at zoom level 4 
    var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels 

    var zoom = map.getZoom(); 
    var relativePixelSize = Math.round(pixelSizeAtZoom4*Math.pow(1.2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size. Base of exponent is 2 because relative size should double every time you zoom in 

    if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon 
    relativePixelSize = maxPixelSize; 

    if(zoom < 4) //when zooming < 4, fix pixel size to 9 
    relativePixelSize = 9; 


//change the size of the icon 

marker.setIcon(
    new google.maps.MarkerImage(
     marker.getIcon().url, //marker's same icon graphic 
     null,//size 
     null,//origin 
     null, //anchor 
     new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale 
    ) 
);   
}); 

Answer 1

添加事件侦听器，当你创建它们触发标记的图标的变化

map.addListener('zoom_changed', function() { 
    for (var i=0, len = locations.length; i < len; i++) { 
     // set new icon depending on the value of map.getZoom() 
     markers[i].setIcon(...) 
    } 
}); 

应保存您的标记在一个数组markerszoom_changed事件在for循环中，因此您可以将它们引用为markers[i]。