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

Marcos Centeno Ramos спросил: 12 мая 2018 в 04:25 в: javascript

Я создаю карту, которая позволяет пользователю редактировать многоугольник. Когда они нажимают на редактирование, пользователь перетаскивает многоугольник, который должен получить новые координаты, и используя 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);
    });

Может ли кто-нибудь указать мне в правильном направлении?

1 ответ

geocodezip ответил: 12 мая 2018 в 05:27

У вас есть опечатка в вашем коде. Вы используете исходные данные для расширения границ, исходные данные не будут меняться, вам необходимо расширить границы с новыми значениями пути Polygon:

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>