Google Map API v3 colori Personalizzazione

Question

Sto cercando ottenere una mappa come l'immagine qui sopra utilizzando Google Map. Ho creato la scala di grigi della mappa dando saturazione a -100 nell'oggetto StyledMapType e disegnato un raggio attorno al marcatore utilizzando l'oggetto Cerchio. Ora l'intera mappa è grayscle in quanto non riesco a impostare un altro livello di saturazione all'interno del cerchio. C'è un modo per raggiungere questo obiettivo?

Answer 1

Per quanto ne so, non c'è modo di farlo direttamente all'interno dell'API. Ho dovuto ottenere un effetto simile in passato e il modo in cui l'ho realizzato è stato creare una "ciambella" piuttosto che un cerchio.

L'idea è di creare una forma grande che escluda un'area circolare al suo centro. In questo modo è possibile impostare l'opacità sul poligono piuttosto in basso in modo da evidenziare l'area di interesse, in questo caso il cerchio centrale.

Questo è forse un buon punto di partenza: http://www.geocodezip.com/v3_polygon_example_donut.html

Anche se, ovviamente, nel tuo caso la vostra intenzione di voler modificare i colori. Sappi anche che la dimensione è fissa, quindi a meno che non limiti i limiti della mappa, gli utenti saranno in grado di eseguire lo zoom abbastanza lontano per vedere i bordi (rovinando così l'illusione), e i poligoni si deformeranno verso i poli (fastidiosa terra sferica).

Spero che questo aiuti.

Answer 2

Un'altra idea è creare una seconda mappa, modificarla in un altro modo tramite StyledMapType, posizionarla in modo assoluto e posizionarla davanti alla prima mappa grigi.

Si può far sembrare tutto usando -webkit-maschera come descritto here

Si dovrebbe anche sincronizzare gli eventi tra mappe, in modo che essi coincidono, cioè centrato nella stessa posizione e hanno sempre lo stesso livello di zoom. È necessario anche per creare una sorta di blocker per evitare chiamate ricorsive

var block = false; 
google.maps.event.addListener (thismap, 'center_changed', function(event) { 
    if (block) return; 
    block = true; 
    othermap.setCenter(thisMap.getCenter()); 
    block=false; 
}); 

Lo stesso dovrebbe essere fatto per 'center_changed' (per controllare le mappe di centraggio) e per 'zoom_changed' (mappe controllo dello zoom), per entrambe le mappe

Qui ho creato un example

Se sarà necessario creare più di una mappa in questo modo, avrete bisogno di lavorare di più per farli aderire al punti necessari