2010-07-19 5 views
9

У меня есть карта Google, работающая на API v3, я добавил некоторые пользовательские маркеры, можно ли их масштабировать в зависимости от уровня масштабирования карты? Я попытался найти ссылку, но не могу найти какие-либо методы для изменения размера MarkerImage.Изменить размеры маркеров в зависимости от масштаба Google maps v3

Возможно, мне нужно удалить маркеры, все, что изменит карту, изменит масштаб и создаст новые маркеры разного размера?

ответ

7

К сожалению, вам будет нужно устанавливатьIcon каждый раз. Однако вы можете предварительно определить их, а затем просто применить их к маркеру.

zoomIcons = [null, icon1, icon2]; // No such thing as zoom level 0. A global variable or define within object. 
marker.setIcon(zoomIcons[map.getZoom()]); 
+2

Вы также можете подключить это к zoom_changed события, такие как: google.maps.event.addListener (карта, "zoom_changed", функция() {вар зум = map.getZoom(); // делаем что-то в зависимости от текущего увеличения}); – Dr1Ku

24

Этот код будет изменяться каждый раз при масштабировании карты, поэтому он всегда будет охватывать одну и ту же географическую область.

//create a marker image with the path to your graphic and the size of your graphic 
var markerImage = new google.maps.MarkerImage(
    'myIcon.png', 
    new google.maps.Size(8,8), //size 
    null, //origin 
    null, //anchor 
    new google.maps.Size(8,8) //scale 
); 

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(38, -98), 
    map: map, 
    icon: markerImage //set the markers icon to the MarkerImage 
}); 

//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 pixelSizeAtZoom0 = 8; //the size of the icon at zoom level 0 
    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(pixelSizeAtZoom0*Math.pow(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; 

    //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

Спасибо, что сработали! Мне также нравится дополнительный шаг масштабирования для покрытия географической части. Однако для меня маркеры символичны, поэтому я просто использовал условные условные обозначения на map.getZoom(), чтобы соответствующим образом масштабировать их. – efwjames

+1

Спасибо за ваш код. По-видимому, MarkerImage устарел и удален. Используйте это сейчас -> https://developers.google.com/maps/documentation/javascript/markers#convertingtoicon –

Смежные вопросы