Центр многоугольников Google Maps не обновляется при перемещении

Question

Я создаю карту, которая позволяет пользователю редактировать многоугольник.Когда они нажимают кнопку edit, пользователь перетаскивает многоугольник, который должен получить новые координаты, и с помощью js LatLngBounds() он должен пересчитать новый центр, чтобы его можно было сохранить в БД как новый центр карты.Моя проблема в том, что, хотя координаты местоположения многоугольника обновляются, как они должны при каждом перетаскивании, новый центр обновляется только при первом перетаскивании.

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"></script>
<div id="map"></div>