2010-07-19 30 views
9

Tengo un mapa de Google ejecutado en la API v3, agregué algunos marcadores personalizados, ¿es posible hacerlos escalar según el nivel de zoom del mapa? Intenté buscar la referencia, pero no puedo encontrar ningún método para cambiar el tamaño de un MarkerImage.Cambiar el tamaño de los marcadores según el zoom Google maps v3

Tal vez tengo que eliminar marcadores todo el mapa cambia de zoom y crear nuevos marcadores en diferentes tamaños?

Respuesta

7

Desafortunadamente, tendrías que configurar conicon cada vez. Sin embargo, puede predefinirlos y luego simplemente aplicarlos al marcador.

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

También puede conectar a un evento zoom_changed, tales como: google.maps.event.addListener (mapa, "zoom_changed", function() {var = zoom map.getZoom(); // hacer algo dependiendo del zoom actual}); – Dr1Ku

24

Este código cambiará el tamaño cada vez que se acerca el mapa, por lo que siempre cubre la misma área geográfica.

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

¡Gracias, funcionó! También me gusta el paso adicional de escalar para cubrir la parte geográfica. Sin embargo, para mí, los marcadores son simbólicos, por lo que acabo de utilizar condicionales de comparación en map.getZoom() para escalarlos de forma adecuada. – efwjames

+1

Gracias por su código. Aparentemente MarkerImage fue desaprobado y eliminado. Usa ahora esto -> https://developers.google.com/maps/documentation/javascript/markers#convertingtoicon –

Cuestiones relacionadas