Редактировать и сохранять обновленные координаты многоугольника в картах 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 выглядит примерно так:

1. Нарисуйте многоугольник, если у вас уже есть координаты, сохраненные пользователем. Затем подогнать границы карты к границам полигона. Для этого вам, вероятно, понадобится getBounds полифилл.

2. Сделайте многоугольник редактируемым, чтобы вы могли слушать изменения его точек. Проверьте функцию enableCoordinatesChangedEvent.

3. Прослушайте изменения и извлеките новые точки многоугольника. Найдите функцию extractPolygonPoints.

Затем перейдите к своему бизнес-логу c.

К вашему сведению, вам нужно будет поместить свой собственный ключ API в нижняя часть stackblitz index.html. Ищите YOUR_KEY.