Google Map API v3 Individuelle Farbanpassung

Question

Ich versuche, eine Karte wie die oben Bild erzielen. Ich habe die Map-Graustufen erstellt, indem ich im StyledMapType-Objekt eine Sättigung von -100 eingegeben und mit dem Circle-Objekt einen Radius um die Markierung gezeichnet habe. Jetzt ist die ganze Karte grau, da ich keine andere Sättigungsebene innerhalb des Kreises einstellen kann. Gibt es einen Weg, dies zu erreichen?

Answer 1

Soweit ich weiß, gibt es keine Möglichkeit, dies direkt innerhalb der API zu erreichen. Ich musste in der Vergangenheit einen ähnlichen Effekt erzielen, und die Art und Weise, wie ich das tat, bestand darin, eher einen "Donut" als einen Kreis zu kreieren.

Effektiv ist die Idee, eine große Form zu erstellen, die einen kreisförmigen Bereich in seiner Mitte ausschließt. Auf diese Weise können Sie die Deckkraft des Polygons relativ niedrig einstellen, um den "Interessenbereich" in diesem Fall den zentralen Kreis hervorzuheben.

Dies ist vielleicht ein guter Ausgangspunkt: http://www.geocodezip.com/v3_polygon_example_donut.html

Obwohl offensichtlich in Ihrem Fall Ihrer um die Farben zu ändern, gehen zu wollen. Beachten Sie auch, dass die Größe festgelegt ist. Wenn Sie die Grenzen der Karte nicht begrenzen, können Benutzer weit genug herauszoomen, um die Kanten zu sehen (wodurch die Illusion ruiniert wird), und Polygone verzerren sich zu den Polen (nervtötende kugelförmige Erde).

Hoffe, das hilft.

Answer 2

Eine andere Idee ist es, eine zweite Karte zu erstellen, sie auf andere Weise mit StyledMapType zu formatieren, sie absolut zu positionieren und sie vor die erste Graustufenkarte zu stellen.

Sie können es rund mit -webkit-Maske aussehen zu lassen wie here beschrieben

Sie sollten auch Ereignisse zwischen Karten synchronisieren, so dass sie zusammenfallen würde, das heißt auf die gleiche Position zentriert und haben immer gleichen Zoomstufe. Sie müssen auch eine Art von Blocker zu schaffen, um zu vermeiden rekursive Aufrufe

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

Das gleiche gilt für ‚center_changed‘ (zur Steuerung Karten Zentrierung) und für ‚zoom_changed‘ (Kontrollkarten zoom), für beide Karten getan werden sollte

Hier habe ich eingerichtet ein example

Wenn Sie benötigen mehr als eine Karte zu schaffen, die Art und Weise, müssen Sie mehr Arbeit tun, um sie zu notwendigen Punkte machen Stick