Indicatori personalizzati mappa Google Risoluzione retina

Question

Sto sviluppando un'applicazione per iPhone in html5 e realizzando la build con PhoneGap. Nell'applicazione c'è una mappa di Google con i marcatori personalizzati, il modo in cui vengono create le icone degli indicatori è la seguente:

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             
      }); 

La dimensione effettiva l'icona di sono di dimensioni doppie rispetto alle dimensioni definite nel codice. Questo è fatto per assicurarsi che le icone siano mostrate in alta risoluzione sul display Retina. Il codice sopra funzionava bene fino ad oggi, ma quello che succede ora è il seguente.

Quando le icone goccia verso il basso, utilizzando il google.maps.Animation.DROP, l'icona viene visualizzata in alta risoluzione durante la discesa, ma quando l'icona "terre" sulla mappa, l'icona passa a una bassa risoluzione versione di risoluzione.

Qualcuno ha mai provato la stessa cosa?

Grazie ...

UPDATE scoperto che se a specificare la versione della mappa di Google come:

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

Quindi credo che sia un bug nel recente Goolge mappa API.

Answer 1

Ho appena trovato anche questo problema. Il bug sembra essere il più recente (v3.7) della loro API, quindi se si specifica la v3.6 tramite il parametro URL? V = 3.6 funzionerà correttamente.

Aggiornamento: Nella versione 3.8+ (credo) è possibile utilizzare ottimizzato: falso per forzare un'immagine retina, se si utilizza uno. Questo perché ottimizzato: true prende tutti i tuoi sprite e li intreccia in uno sprite principale. Questo significa che dovresti farlo solo se hai pochissimi segnalini. Inoltre, non funziona troppo bene con Clusterer.

Il valore predefinito è ora ottimizzato: true, che determinerà innanzitutto se il dispositivo può persino gestire il rendering di così tante icone ad alta risoluzione prima di creare uno sprite principale a una risoluzione più elevata. Ad esempio, carica una mappa con molti marker su un MacBook Pro retina, e appariranno ad alta risoluzione, ma prova un iPhone 4 e non lo farà. Se imponi l'utilizzo dell'iPhone 4 ottimizzato: false e molti marcatori, potrebbe balbettare molto. Non sono sicuro del 4S, ma presumo che probabilmente userà la versione più alta in quanto ha una capacità di elaborazione molto migliore.

Answer 2

Se si riscontra un passaggio di icone per risoluzione più bassa, è perché l'API di Google Maps utilizza tela per rendere le icone (raggruppandoli e quant'altro?) Per un'esperienza utente più veloce a quanto pare. Quindi non è tecnicamente un bug, ma lo fa causano cose buggy ad accadere in alcuni browser (come anziani ie)

Ma v'è una impostazione che si può usare per spegnere in MarkerOptions utilizzando optimized: false

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

Answer 3

Ho trovato la mia soluzione a questo utilizzando scaledSize anziché size per definire la larghezza e l'altezza dell'immagine.

Answer 4

proprietà Size Scaled è quello corretto da utilizzare come riferito da Google qui: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

Answer 5

semplicemente utilizzare un oggetto con url, size, e scaledSize attributi:

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

Dove path/img/marker@2x.png è un 60px x 80px PNG.