Marcadores personalizados del mapa de Google Retina resolution

Question

Estoy desarrollando una aplicación para iPhone en html5 y haciendo la compilación con Phonegap. En la aplicación hay un mapa de Google con los marcadores personalizados, la forma en que se crean los iconos de marcador es el siguiente:

var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30)); 
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30)); 

var marker = new google.maps.Marker({ 
       map: map, 
       position: latlng, 
       index: markers.length, 
       icon: image,      
       shadow: shadow, 
       animation: google.maps.Animation.DROP, 
       html: htmlContent             
      }); 

El tamaño real de la década de los iconos son de doble tamaño en comparación con los tamaños definidos en el código. Esto se hace para asegurarse de que los iconos se muestran en alta resolución en la pantalla Retina. El código anterior funcionó bien hasta hoy, pero lo que sucede ahora es lo siguiente.

Cuando los iconos se despliegan, usando google.maps.Animation.DROP, el icono se muestra en alta resolución en el camino hacia abajo, pero cuando el icono "aterriza" en el mapa, el icono cambia a una resolución baja versión de resolución.

¿Alguien ha experimentado lo mismo?

Gracias ...

ACTUALIZACIÓN encontrado que si se especifica la versión del mapa de Google como:

http://maps.googleapis.com/maps/api/js?v=3.0 

Así que supongo que es un error en el mapa más nuevo API Goolge.

Answer 1

Acabo de encontrar este problema también. El error parece estar en la última versión (v3.7) de su API, por lo que si especifica v3.6 a través del parámetro de URL? V = 3.6 funcionará bien.

Actualización: En la versión 3.8+ (creo) puede utilizar optimized: false para forzar una imagen de retina, si está utilizando una. Esto es porque optimizado: true toma todos tus sprites y los entrelaza en un sprite maestro. Esto significa que solo deberías hacer esto si tienes muy pocos marcadores. Además, no funciona demasiado bien con Clusterer.

El valor predeterminado ahora está optimizado: verdadero, que determinará primero si el dispositivo puede manejar el procesamiento de tantos iconos de alta resolución antes de crear un elemento maestro a una resolución más alta. Por ejemplo, cargue un mapa con muchos marcadores en una retina Macbook Pro, y aparecerá en alta resolución, pero pruebe con un iPhone 4 y no lo hará. Si fuerza el iPhone 4 usando optimizado: falso, y tiene muchos marcadores, puede tartamudear mucho. No estoy seguro acerca del 4S pero supongo que probablemente use la versión de mayor resolución ya que tiene una capacidad de procesamiento mucho mejor.

Answer 2

Si encuentra algún cambio de iconos a una resolución más baja, es porque la API de mapas usa lienzo para representar los iconos (agrupándolos y ¿qué?) Para una experiencia de usuario más rápida. Por lo que técnicamente no es un error, pero sí causan cosas con errores que ocurran en algunos navegadores (como por ejemplo mayores)

Pero hay una configuración que puede utilizar para apagar en MarkerOptions usando optimized: false

var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng, 
      icon: image,      
      shadow: shadow, 
      optimized: false            
     }); 

Answer 3

Encontré mi solución para esto utilizando scaledSize en lugar de size para definir el ancho y el alto de la imagen.

Answer 4

Scaled propiedad tamaño es el correcto para su uso como referenciado por Google aquí: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

Answer 5

simplemente utilizar un objeto con url, size y scaledSize atributos:

var icon = { 
    url: 'path/img/marker@2x.png', 
    size: new google.maps.Size(30, 40), 
    scaledSize: new google.maps.Size(30, 40) 
}; 

Dónde path/img/marker@2x.png es un 60px x 80px PNG.