2010-07-19 18 views
9

Mam mapę Google działającą na interfejsie API V3, dodałem niestandardowe znaczniki, czy możliwe jest skalowanie w zależności od poziomu powiększenia mapy? Próbowałem przeszukać odniesienie, ale nie mogę znaleźć żadnych metod, aby zmienić rozmiar MarkerImage.Zmienianie rozmiaru znaczników w zależności od powiększenia Mapy Google v3

Może muszę usunąć znaczniki wszystko, co zmieni mapa, powiększyć i utworzyć nowe znaczniki w innym rozmiarze?

Odpowiedz

7

Niestety, musiałbyś ustawić za każdym razem. Możesz jednak wstępnie je zdefiniować, a następnie zastosować je do znacznika.

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

Można również podpiąć to do zoom_changed imprezy, takie jak: google.maps.event.addListener (mapa "zoom_changed", function() {var zoom = map.getZoom(); // zrobić coś zależnie od bieżącego powiększenia}); – Dr1Ku

24

Ten kod zmienia rozmiar za każdym razem, gdy mapa jest powiększana, więc zawsze obejmuje ten sam obszar geograficzny.

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

Dziękuję, że to zadziałało! Podoba mi się również dodatkowy krok skalowania, aby pokryć część geograficzną. Jednak dla mnie znaczniki są symboliczne, więc użyłem po prostu warunków porównania na map.getZoom(), aby odpowiednio je skalować. – efwjames

+1

Dzięki za twój kod. Wygląda na to, że MarkerImage został wycofany i usunięty. Użyj teraz tego -> https://developers.google.com/maps/documentation/javascript/markers#convertingtoicon –

Powiązane problemy