0

Я использую пользовательское изображение как значок/маркер для API карт Google. Я хотел бы, чтобы изображение маркера изменялось по мере увеличения масштаба изображения на карте.Изменение размера маркера изображения с масштабированием - API Карт Google v3

Я принял часть кода из этого вопроса: 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 
    ) 
);   
}); 
+0

Связанный вопрос: [изменить Google Maps пользовательский значок с зумом] (http://stackoverflow.com/questions/18992074/change-google-maps-custom-icon-with-zoom) – geocodezip

ответ

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

Вы должны сохранить свои маркера в массиве markers при их создании в цикле for, поэтому вы можете ссылаться на них как markers[i].

+0

Спасибо за ответ! Я довольно зеленый, когда дело доходит до создания массивов, поэтому я попытался использовать другой подход, в основном изменяя размер одного и того же маркера в зависимости от уровня масштабирования. –