Markieren Sie Polygon und Farbton Rest der Karte mit Google Maps

Question

Ich möchte ein hervorgehobenes Polygon mit Google Maps anzeigen. Die Idee ist, dass das fragliche Polygon normal angezeigt wird und der Rest der Karte ein wenig abgedunkelt werden sollte.

Hier ist ein Beispiel Bild, was ich mit einem Polygon aus Österreich erreichen möchte: alt text http://a.imagehost.org/0613/google_maps_tint_example.png

Leider ist ich ein kompletter Anfänger, wenn es um Google Maps API und Karten Sachen im Allgemeinen.

Also, ist das überhaupt möglich mit Google Map API? Wenn ja, mit welcher Version (v2, v3)? Wäre es einfacher, es mit anderen Karten-Toolkits, wie Openlayern, zu machen?

PS: Eine Idee, die ich hatte, war, ein inverses Polygon zu bauen (in diesem Beispiel die ganze Welt minus die Form von Österreich) und dann ein schwarz gefärbtes Overlay mit Transparenz mit diesem invertierten Polygon anzuzeigen. Aber das scheint mir ziemlich kompliziert zu sein.

Answer 1

Mit Google Maps API v3 können Sie polygons mit Löchern zeichnen. Hier ist Googles Pentagon Beispiel. Es ist viel einfacher als ein Polygon zu invertieren. Im Grunde erstellen Sie Koordinaten für ein riesiges Polygon, das größer ist als Sie jemals brauchen würden. Das ist immer das erste Polygon in Ihrem Polygon-Array. Der hervorgehobene Bereich ist immer das zweite Polygon.

Hier einige Code von Google zu ändern Bermuda Triangle demo ein Polygon mit einem Loch zu verwenden:

var everythingElse = [ 
    new google.maps.LatLng(0, -90), 
    new google.maps.LatLng(0, 90), 
    new google.maps.LatLng(90, -90), 
    new google.maps.LatLng(90, 90), 
    ]; 



    var triangleCoords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.75737), 
    new google.maps.LatLng(25.774252, -80.190262) 
    ]; 




    bermudaTriangle = new google.maps.Polygon({ 
    paths: [everythingElse, triangleCoords], 
    strokeColor: "#000000", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#000000", 
    fillOpacity: 0.5 
    }); 

    bermudaTriangle.setMap(map); 

Answer 2

Bezüglich:

der Rest der Karte sollte ein wenig verdunkelt werden.

Dies kann mit Maps API v3 unter Verwendung Styled Maps durchgeführt werden.

Es gibt sogar eine Styled Maps Wizard, wo Sie mit den Einstellungen spielen können, und drücken Sie dann Show JSON, um das Array als das erste Argument an new google.maps.StyledMapType zu übergeben.

Um den Effekt zu erhalten, Sie wollen einfach nur die Lightness für alles reduzieren, im Assistenten werden Sie dies in der Map Style Box sehen wollen, auf der rechten Seite:

Feature type: all 
Element type: all 
Lightness: -70 

Welche zu werden exportieren:

[ 
    { 
    "stylers": [ 
     { "lightness": -70 } 
    ] 
    } 
] 

Und look like this.

Answer 3

UNTER VERWENDUNG GeoJSON

<div id="googleMap" style="width:500px;height:380px;"></div> 

// define map properties 
    var mapProp = { 
     center: new google.maps.LatLng(23.075984, 78.877656), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
//create google map 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

// define geojson 
    var geojson = { 
     "type": "FeatureCollection", 
     "features": [{ 
      "type": "Feature", 
      "geometry": { 
       "type": "Polygon", 
       "coordinates": [ 
        [ 
         [0, 90], 
         [180, 90], 
         [180, -90], 
         [0, -90], 
         [-180, -90], 
         [-180, 0], 
         [-180, 90], 
         [0, 90] 
        ], 
        [ 
         [79.56298828125, 25.18505888358067], 
         [76.53076171875, 21.37124437061832], 
         [83.38623046875, 21.24842223562701], 
         [79.56298828125, 25.18505888358067] 
        ] 
       ] 
      }, 
      "properties": {} 
     }] 
    }; 
//add geojson to map 
    map.data.addGeoJson(geojson); 

einhüllen externer GeoJSON Datei

map.data.loadGeoJson('url-to-geojson-file'); 

Notiz verwenden: .json als Erweiterung für GeoJSON Datei und kann nicht verwendet Google.GeoJSON https://developers.google.com/maps/documentation/javascript/datalayer

Ihre GeoJSON
https://google-developers.appspot.com/maps/documentation/utils/geojson/

Beispiel https://jsfiddle.net/841emtey/5/