谷歌地图多边形中心在拖动时不更新

Question

我正在创建一个允许用户编辑多边形的地图。当他们单击编辑时，用户拖动它应该获取新坐标的多边形，并使用 jsLatLngBounds()它应该重新计算新中心，以便它可以作为地图的新中心保存在数据库中。我的问题是，即使多边形位置的坐标在每次拖动时都会按预期更新，但新中心只会在第一次拖动时更新。

zoom = 14;
center = { lat: 42.517507245039106, lng: -113.71461353607174 }
zonedata = [{lat: 42.52174788319468, lng: -113.71611522387695},
{lat: 42.51826478153626, lng: -113.72565284826658},
{lat: 42.51326660688353, lng: -113.7043792873535},
{lat: 42.520336574464594, lng: -113.70357422387696}]
var editmap = new google.maps.Map(document.getElementById("map"), {
center: center,
zoom: zoom
});
var editzones = new google.maps.Polygon({
paths: zonedata,
fillColor: '#FF0000',
fillOpacity: 0.35,
strokeWeight: 0,
draggable: true,
editable: true
});
editzones.setMap(editmap);
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(editmap);
google.maps.event.addListener(editzones, 'dragend', function(){
var polypath = editzones.getPath();
coordinates = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0 ; i < polypath.length ; i++) {
bounds.extend(zonedata[i]);
coordinates.push({
lat: polypath.getAt(i).lat(),
lng: polypath.getAt(i).lng()
});
}
var lat = bounds.getCenter().lat().toString();
var lng = bounds.getCenter().lng().toString();
var center = new google.maps.LatLng(lat, lng);
stringlocation = JSON.stringify(coordinates);
stringcenter = JSON.stringify(center);
console.log(stringcenter + stringlocation);
});

谁能指出我正确的方向？

Answer 1

你的代码中有拼写错误。 您正在使用原始数据来扩展边界，原始数据不会更改，您需要使用多边形路径的新值扩展边界：

google.maps.event.addListener(editzones, 'dragend', function(){
var polypath = editzones.getPath();
coordinates = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0 ; i < polypath.length ; i++) {
bounds.extend(zonedata[i]); // <======= typo, this is the original array, it won't change.
coordinates.push({
lat: polypath.getAt(i).lat(),
lng: polypath.getAt(i).lng()
});
}
var lat = bounds.getCenter().lat().toString();
var lng = bounds.getCenter().lng().toString();
var center = new google.maps.LatLng(lat, lng);
stringlocation = JSON.stringify(coordinates);
stringcenter = JSON.stringify(center);
console.log(stringcenter + stringlocation);
});

应该是：

google.maps.event.addListener(editzones, 'dragend', function(){
var polypath = editzones.getPath();
coordinates = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0 ; i < polypath.length ; i++) {
bounds.extend(polypath.getAt(i)); // <==== updated path of polygon
coordinates.push({
lat: polypath.getAt(i).lat(),
lng: polypath.getAt(i).lng()
});
}
var lat = bounds.getCenter().lat().toString();
var lng = bounds.getCenter().lng().toString();
var center = new google.maps.LatLng(lat, lng);
stringlocation = JSON.stringify(coordinates);
stringcenter = JSON.stringify(center);
console.log(stringcenter + stringlocation);
});

概念验证小提琴

代码片段：

var geocoder;
var map;
var zonedata = [{
lat: 37.467776,
lng: -122.155194
},
{
lat: 37.448836,
lng: -122.173734
},
{
lat: 37.446928,
lng: -122.121549
}
]
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var zoom = 13;
var editmap = new google.maps.Map(document.getElementById("map"), {
center: center,
zoom: zoom
});
google.maps.event.addListener(editmap, 'click', function(e) {
console.log(e.latLng.toUrlValue(6));
});
var editzones = new google.maps.Polygon({
paths: zonedata,
fillColor: '#FF0000',
fillOpacity: 0.35,
strokeWeight: 0,
draggable: true,
editable: true
});
editzones.setMap(editmap);
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(editmap);
google.maps.event.addListener(editzones, 'dragend', function() {
var polypath = editzones.getPath();
coordinates = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < polypath.length; i++) {
bounds.extend(polypath.getAt(i));
coordinates.push({
lat: polypath.getAt(i).lat(),
lng: polypath.getAt(i).lng()
});
}
var center = bounds.getCenter();
stringlocation = JSON.stringify(coordinates);
stringcenter = JSON.stringify(center);
console.log(stringcenter + stringlocation);
});
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>