Ist es möglich, eine Google Maps-Karte mit Ausnahme eines bestimmten Bereichs auszublenden?

15

Was ich suche, ist eine Möglichkeit, einen bestimmten Bereich auf einer Google Maps-Karte hervorzuheben, indem der Rest der Welt ausgegraut wird.

Ich habe von einer Lösung für die Verwendung von 2 Polygonen gehört, von denen eines sichtbar ist und das andere nicht. Es funktioniert nur, wenn die Karte statisch ist (keine Kartenbewegung). Ich möchte jedoch, dass der Benutzer die Karte zoomen und ziehen kann.

Ich bin auch an anderen Möglichkeiten interessiert, die ich nicht in Betracht gezogen habe, um einen Bereich hervorzuheben.

aktualisieren:

Wenn ich die von radek veröffentlichte Lösung ausprobiere (dh ein KML mit einem Polygon mit einem OuterBoundaryIs (größer als Ansicht) und einem InnerBoundaryIs (hervorzuhebender Bereich) erstellen), bekomme ich das Problem, dass beim Vergrößern rechteckige Bereiche nicht abgedeckt werden das umgebende Polygon mehr. Sehen:

Bildbeschreibung hier eingeben

Jemand mit Erfahrung / Lösung dafür?

update2:

Ich hatte endlich Zeit, Radeks Lösung mit Google Fusion Tables zu testen. Anfangs hatte ich die gleichen Probleme mit fehlenden Kacheln wie mit KML (siehe Bild oben), aber nach einem erneuten Ladevorgang schien es, als hätte es sich festgesetzt und die Kacheln zeigten sich völlig korrekt. Ich habe das Gefühl, dass der JQuery-Hack in seiner Lösung für Kacheln gedacht war, die nicht geladen wurden:

setTimeout(function(){ 
        $("img[src*='googleapis']").each(function() { 
            $(this).attr("src",$(this).attr("src")+"&"+(new Date()).getTime()); 
        }); 
    }, 5000);

Da die Kacheln nach einer Auffrischung zu laden schienen, habe ich den Hack selbst nicht benutzt. Wenn der Fehler bei jedem neuen Benutzer auftritt, werde ich damit experimentieren.

mrg
quelle

Antworten:

18

Google Maps Mania- Blog verweist auf ein Beispiel für eine Karte mit Schweizer Verwaltungsgrenzen :

Bildbeschreibung hier eingeben

Der Code von Vasile ist auf Github .

radek
quelle
1
Dies zeigt in der Tat die Funktionalität, die ich suche! Ich muss in die Quelle eintauchen, um zu sehen, ob sie in meinem Fall leicht zu implementieren ist. Sie sprechen über Hacks (ich bekomme sofort IE7 Ängste).
Mrg 16.01.12
Ist die Verwendung von Google Fusion Tables in diesem Beispiel ein Muss? Ich benutze das im Moment nicht. Ich lade den Github-Code herunter und überprüfe die Anforderungen.
16.
2
Es kommt darauf an, in KML ein Polygon mit einem OuterBoundaryI (die Welt) und einem InnerBoundaryI (Ihr Interessengebiet) zu erstellen. Abgesehen davon, dass ich Probleme beim Stylen der Transparenz habe, bekomme ich beim Vergrößern immer wieder Löcher in meine halbtransparente Ebene. Hat jemand Erfahrung damit?
16.
1
KML-Dateien werden nur langsam geladen. Wenn Sie sie also ständig ändern, kann dies zu einer sehr schleppenden Wirkung führen. Abgesehen davon müsste ich den Namen nicht ständig ändern, um sicherzustellen, dass das alte kml nicht zwischengespeichert wird? Ich habe das Gefühl, dass ich Google Fusion Tables-Kenntnisse benötige.
Mrg
1
Gibt es eine einfachere Implementierung, die eine KML-Datei anstelle von FusionTables verwenden kann? Ich brauche nur 1 zusammenhängenden Bereich (Stadtgrenzen) farblich hervorzuheben und alles andere auszublenden. Ich habe mir Vasiles Code angesehen, aber er ist wirklich kompliziert und scheint von Browser-Hacks abhängig zu sein. Wenn diese Lösung den Vorschlag von elrobis verwenden kann , das Kartenfenster zur Grundlage für den Graueffekt zu machen, wird sie meiner Meinung nach viel stabiler / schneller sein. {Zeichne eine Grenze um die Stadt und färbe sie aus} // Erledige {Alles außer dem Bereich innerhalb der Grenze grau aus} ????????????
user1845528
3

Wenn das von @radek veröffentlichte Tool Ihnen nicht weitergeholfen hat, gibt es ein anderes Tool, das nur die Funktionen von google.maps.Polygon verwendet: http://maps.vasile.ch/geomask/

Grundsätzlich folgt es dem Wicklungszahlenalgorithmus: Das Maskenpolygon (Universum) wird im Uhrzeigersinn digitalisiert und alle inneren Polygone werden gegen den Uhrzeigersinn digitalisiert. Http://en.wikipedia.org/wiki/Winding_number

Vasile Cotovanu
quelle