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

为zoom_changed个事件添加一个事件监听器，触发更改标记的图标

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(...) 
    }
});

在for循环中创建标记时，应将标记保存在数组markers中，以便将其引用为markers[i]。

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

1 个答案: