Javascript 在谷歌地图中编辑并保存更新的多边形坐标

在我的rails应用程序中，我使用多边形绘制工具实现了一个google地图。我已经能够添加坐标并成功地将其保存到我的数据库中

我遇到的问题是，当用户想要编辑和保存对多边形形状所做的任何更改时。如何实现此功能？我最好的猜测是使用一个条件来查看数据库是否有任何保存的坐标，如果有，将它们加载到侦听器中

HTML

<div style='width: 100%;'>
<%= hidden_field_tag(:map_coords, value = nil, html_options = {id: 'propertyCoordinates'}) %>

Javascript

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: -40.6892, lng: 74.0445 },
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.HYBRID,
});
        
var polyOptions = {
  strokeWeight: 0,
  fillOpacity: 0.45,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35
};
// loads databased saved coordinates
var propertyCoords = [<%= @property.coordinates %>];
var points = [];
for (var i = 0; i < propertyCoords.length; i++) {
  points.push({
   lat: propertyCoords[i][0],
   lng: propertyCoords[i][1]
  });
}
                    
var drawingManager = new google.maps.drawing.DrawingManager({
 drawingMode: google.maps.drawing.OverlayType.POLYGON,
 drawingControlOptions: {
  position: google.maps.ControlPosition.TOP_CENTER,
  drawingModes: ["polygon"]
},
 polylineOptions: {
  editable: true,
  draggable: true
 },
 rectangleOptions: polyOptions,
 circleOptions: polyOptions,
 polygonOptions: polyOptions,
 map: map
});
            
if (typeof points !== 'undefined') {
 // My guess is to use a conditional statement to check if the map has any coordinates saved?
 } else {
 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
  if (e.type !== google.maps.drawing.OverlayType.MARKER) {
  // Switch back to non-drawing mode after drawing a shape.
  drawingManager.setDrawingMode(null);
  // Add an event listener that selects the newly-drawn shape when the user
  // mouses down on it.
  var newShape = e.overlay;
  newShape.type = e.type;
  google.maps.event.addListener(newShape, 'click', function (e) {
   if (e.vertex !== undefined) {
    if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
     var path = newShape.getPaths().getAt(e.path);
      path.removeAt(e.vertex);
      if (path.length < 3) {
       newShape.setMap(null);
      }
     }
    }
  setSelection(newShape);
  });
 }
  var coords = e.overlay.getPath().getArray();
  document.getElementById("propertyCoordinates").value = coords;
  });
 }
} // END function initMap()

函数initMap（）{
var map=new google.maps.map（document.getElementById（“map”）{
中心：{纬度：-40.6892，液化天然气：74.0445}，
缩放：8，
mapTypeId:google.maps.mapTypeId.HYBRID，
});
var多选项={
冲程重量：0，
填充不透明度：0.45，
strokeColor:#FF0000“，
笔划不透明度：0.8，
冲程重量：2，
fillColor:#FF0000“，
不透明度：0.35
};
//加载数据库保存的坐标
var propertyCoords=[]；
var点=[]；
对于（var i=0；i

如果我理解正确，您需要的是多边形编辑功能。我的想法是这样的：

如果已经有用户保存的坐标，则绘制多边形。然后将贴图边界拟合到多边形的边界。为此，您可能需要一个

getBounds

polyfill

使多边形可编辑，以便可以收听其点的更改。检查功能

启用协调变更

聆听更改并提取新的多边形点。查找函数

extractPolygonPoints

然后继续您的业务逻辑

---

仅供参考，您需要将自己的API密钥放在stackblitz

index.html

的底部。寻找

你的钥匙

太棒了。谢谢你，乔。一个微小的变化是改变

document.getElementById（“propertyCoordinates”）.value=coords

to

var coords=e.overlay.getPath（）.getArray（）；document.getElementById（“propertyCoordinates”）.value=coords

保存更新的坐标。