2011-10-20 21 views
39

Estoy usando this explanation de cómo colorear un marcador de google maps configurando el ícono usando un MarkerImage, y la coloración funciona bien. Pero no puedo hacer que el argumento scaleSize cambie el tamaño del marcador.Cambiar el tamaño del marcador en Google maps V3

var pinColor = 'FFFF00'; 
    var pinIcon = new google.maps.MarkerImage(
     "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
     new google.maps.Size(21, 34), 
     new google.maps.Point(0,0), 
     new google.maps.Point(10, 34), 
     new google.maps.Size(2, 4)); 
    marker.setIcon(pinIcon); 

¿Cuál es el uso correcto del argumento scaleSize para cambiar el tamaño del marcador? Por ejemplo, ¿cómo puedo duplicar el tamaño del marcador?

Respuesta

76

Esta respuesta expone sobre John Black's helpful answer, así que se repita algo de su contenido de la respuesta en mi respuesta.

La forma más fácil de cambiar el tamaño de un marcador parece estar dejando el argumento 2, 3 y 4 nulos y escalar el tamaño del argumento 5.

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00", 
    null, /* size is determined at runtime */ 
    null, /* origin is 0,0 */ 
    null, /* anchor is bottom center of the scaled image */ 
    new google.maps.Size(42, 68) 
); 

Como acotación al margen, this answer a una pregunta similar afirma que la definición el tamaño del marcador en el segundo argumento es mejor que la escala en el 5to argumento. No sé si esto es verdad.

Dejando argumentos 2-4 nula funciona muy bien la imagen de pin predeterminado Google para, pero hay que establecer un ancla de forma explícita imagen Contacto sombra el valor por defecto de Google, o se vería así:

what happens when you leave anchor null on an enlarged shadow

La parte inferior central de la imagen del alfiler coincide con la punta del alfiler cuando ves el gráfico en el mapa. Esto es importante, porque la propiedad de posición del marcador (posición del marcador LatLng en el mapa) se ubicará automáticamente con la punta visual del alfiler cuando salga del ancla (4to argumento) null. En otras palabras, dejar el anclaje nulo asegura los puntos de propulsión donde se supone que apunta.

Sin embargo, la punta de la sombra no se encuentra en el centro inferior. Por lo tanto, debe establecer explícitamente el 4º argumento para compensar la punta de la sombra del pin, de modo que la punta de la sombra se coloque con la punta de la imagen del pin.

Experimentando encontré que la punta de la sombra debe establecerse así: x es 1/3 de tamaño e y es 100% de tamaño.

var pinShadow = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_shadow", 
    null, 
    null, 
    /* Offset x axis 33% of overall size, Offset y axis 100% of overall size */ 
    new google.maps.Point(40, 110), 
    new google.maps.Size(120, 110)); 

en hacerle esto:

offset the enlarged shadow anchor explicitly

+4

¿Hay alguna manera de preservar la relación de aspecto en 'google.maps.Size', o para especificar porcentajes en lugar de píxeles reales? ¡Gracias! –

+0

¿Hay alguna manera de volver a escalar el icono del marcador predeterminado? Es decir, ¿puedo cambiar la escala de un marcador _sin tener que usar 'setIcon' en el marcador? – ironchicken

21

Los argumentos de tamaño están en píxeles. Por lo tanto, al doble de su ejemplo el tamaño del marcador el quinto argumento del constructor MarkerImage sería:

new google.maps.Size(42,68) 

Me parece más fácil dejar que la cifra mapa API a los otros argumentos, a menos que necesite algo más que la parte inferior/centro de la imagen como el ancla. En su caso, usted podría hacer:

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
    null, /* size is determined at runtime */ 
    null, /* origin is 0,0 */ 
    null, /* anchor is bottom center of the scaled image */ 
    new google.maps.Size(42, 68) 
); 
Cuestiones relacionadas