在 google 个地图中编辑和保存更新的多边形坐标

Question

在我的 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()

Answer 1

如果我没理解错的话，你要找的是多边形编辑功能。我的 stackblitz example 是这样的：

如果您已有用户保存的坐标，请绘制多边形。然后将地图边界与多边形的边界相匹配。为此，您可能需要 getBounds polyfill。
使多边形可编辑，这样您就可以听到它的点的变化。检查函数 enableCoordinatesChangedEvent.
聆听变化并提取新的多边形点。查找函数 extractPolygonPoints.

然后继续您的业务逻辑。

仅供参考，您需要将自己的 API 密钥放在 stackblitz index.html 的底部。寻找 YOUR_KEY.

在 google 个地图中编辑和保存更新的多边形坐标

Edit and save updated polygon coordinates in google maps

javascript

google-maps

ruby-on-rails

google-maps-api-3