1
Ich habe dieses Ereignis-Listener für, wenn eine Form erstellt:Google Maps API Zeichnen Polygon - overlaycomplete Ereignis gibt nur einen Satz von Koordinaten zurück?
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.872, lng: 151.252},
zoom: 6
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: []
},
polygonOptions: {
fillColor: 'rgba(255, 0, 0, 0.2)',
fillOpacity: 1,
strokeWeight: 2,
clickable: true,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
// Define the LatLng coordinates for the outer path.
var outerCoords = [
{lat: -25.364, lng: 155.207}, // north west
{lat: -35.364, lng: 155.207}, // south west
{lat: -35.364, lng: 148.207}, // south east
{lat: -25.364, lng: 148.207} // north east
];
map.data.add({geometry: new google.maps.Data.Polygon([outerCoords])});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if(event.type == 'polygon') {
var verticles = event.overlay.getPaths();
verticles.forEach(function(verticle, ind){
console.log({
"index": ind,
"lat": verticle.getAt(ind).lat(),
"lng": verticle.getAt(ind).lng(),
"obj": verticle.getAt(ind)
});
});
}
});
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="capture"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFOolEMjIlnlkVle8gsiDA1ym3aktxEGc&libraries=drawing&callback=initMap"
async defer></script>
</body>
</html>jedoch .getPaths() scheinen nur ein Satz von lat/lng, unabhängig davon, wie viele Zeilen zurück meine Polygon besteht aus. Aus der Dokumentation schien es, dass es ein Array von Objekten zurückgeben sollte, wobei jedes ein Array von zwei Punkten (lat/lng) ist, die benötigt werden, um die Linie zu zeichnen. Was vermisse ich?