2016-11-12 5 views
-1

Ich möchte einen Polygon-Bereich als Bilder mit Google MAP erstellen, können Sie wissen, wie man das Array von Koordinaten für den Bereich bekommen?Wie bekomme ich ein Array von Punkten, die ein Polygon erstellen würde google map

enter image description here

picture of desired polygon

+1

Verwandte Frage: [OSM zu Google Maps Polygone] (http://stackoverflow.com/questions/36704706/osm-to-google-maps-polygons) – geocodezip

+0

eine andere verwandte Frage: http://stackoverflow.com/questions/9706484/add-search-area-outline-auf-google-maps-result – xomena

+0

@xomena vielen dank, du hast mir wirklich geholfen –

Antwort

1

Sie können ein Polygon unter Verwendung einer Anordnung von lat, lng Paare von mindestens 3 Elementen aufzubauen.

Wenn das Array nicht geschlossen ist, wird Google Maps wird standardmäßig geschlossen.

Während für die meisten DBMS, müssen Sie ein Array von Koordinaten speichern, die geschlossen ist. Was bedeutet in der Nähe? Im Wesentlichen sind der erste und der letzte Punkt des Arrays gleich. DBMS wie MongoDB wird einen Fehler für schlecht formatierte Geodaten auslösen. MongoDB Documentation on $polygon. Eine andere Sache zu erwähnen ist, dass, MongoDB akzeptiert nur lng, lat formatierte Koordinaten.

Wie man aus Official Google Maps Documentation on Polygons sehen kann man ein Vieleck, ausgehend von einem Array von Koordinaten zurückgreifen:

// Define the LatLng coordinates for the polygon. 
var triangleCoords = [ 
    {lat: 25.774, lng: -80.190}, 
    {lat: 18.466, lng: -66.118}, 
    {lat: 32.321, lng: -64.757} 
]; 

Dann kann man es und es auf der Karte gesetzt konstruieren:

// Construct the polygon. 
var bermudaTriangle = new google.maps.Polygon({ 
    paths: triangleCoords, //Array of Coordinates 
    strokeColor: '#FF0000', //Color of the line 
    strokeOpacity: 0.8, //Color opacity 
    strokeWeight: 3, //Line weight 
    fillColor: '#FF0000', //Inner Color 
    fillOpacity: 0.35 //Inner color opacity 
}); 
//Set it on the map 
bermudaTriangle.setMap(map); 

Dann Sie können Informationen zu Ihrem Polygon hinzufügen, indem Sie clickListener und infoWindows

// Add a listener for the click event and opens infoWindow 
bermudaTriangle.addListener('click', showArrays); 

infoWindow = new google.maps.InfoWindow; 
verwenden

Sie können mehr über infoWindows here lesen.

Schließlich, here können Sie einen Plunker finden, den ich mit Google Maps Docs und AngularJS gemacht habe. Natürlich kannst du das mit reinem Javascript machen.

Last but not least, stellen Sie sicher, dass Sie Punkte an den Grenzen und mit vernünftigen lat, lng Koordinaten haben.

Ich hoffe, ich war hilfreich.

Verwandte Themen