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

Question

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

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

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()

Answer 1

如果我理解正确的话，您正在寻找的是多边形编辑功能。我的stackblitz example事情是这样的:

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

2. 使多边形可编辑，以便您可以收听其点的变化。检查函数enableCoordinatesChangedEvent。

3. 监听变化并提取新的多边形点。查找函数extractPolygonPoints。

然后继续您的业务逻辑。

仅供引用，您需要将自己的 API key 放在 stackblitz index.html 的底部。查找YOUR_KEY。