map-api - 获取多边形的编辑坐标

Question

我们的要求是绘制一个多边形，存储坐标数据库，然后显示多边形，允许用户编辑，获取编辑后的坐标并再次更新数据库

我们能够绘制一个多边形，存储坐标数据库，然后显示多边形，允许用户编辑。但我们无法获得编辑后的坐标

我们使用的代码如下

<script>
var overlay;
var bermudaTriangle;
var drawingManager;
var selectedShape;
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 11.049780283836538,
      lng: 77.04207648560849
    },
    zoom: 17,
    mapTypeId: 'hybrid'
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
    },
      polygonOptions: {
        strokeWeight: 2,
        fillOpacity: 0.45,
        fillColor: '#ffffff',
        strokeColor: '#ffffff',
        editable:true,
        draggable:true
      },    
  });
  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);
      // To hide:
      drawingManager.setOptions({
        drawingControl: false
      });       

    /**
    var verticles = e.overlay.getPaths().getArray();
      verticles.forEach(function(verticle, ind){
      console.log({
        "index": ind,
        "lat": verticle.getAt(ind).lat(),
        "lng": verticle.getAt(ind).lng(),
        "obj": verticle.getAt(ind)
      });        
      });
    **/
    
    document.getElementById('coords').value = e.overlay.getPath().getArray();

  overlay = e.overlay;  // save a reference to the polygon
  // new vertex listener
  google.maps.event.addListener(e.overlay.getPath(), 'insert_at', getCoordinates); 
  // move vertex listener
  google.maps.event.addListener(e.overlay.getPath(), 'set_at', getCoordinates); 
  
      // 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() {
        setSelection(newShape);
      });
      setSelection(newShape);
    }
  });
  // Clear the current selection when the drawing mode is changed, or when the
  // map is clicked.
  google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
  google.maps.event.addListener(map, 'click', clearSelection);  
  google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); 
  drawingManager.setMap(map);

/** Display **/   
        var lat1=11.05009091674031;
        var lng1=77.04170634076443;
        var lat2=11.049122162191217;
        var lng2=77.04091240689603;
        var lat3=11.048385064195973;
        var lng3=77.04286505505887;
        var lat4=11.049353821178723;
        var lng4=77.04354097173062;
        var lat5=11.050248865548289;
        var lng5=77.04376627728787;     
        const triangleCoords = [
          { lat: lat1, lng: lng1 },
          { lat: lat2, lng: lng2 },
          { lat: lat3, lng: lng3 },
          { lat: lat4, lng: lng4 },
          { lat: lat5, lng: lng5 }
          ];
        
        // Construct the polygon.
        const bermudaTriangle = new google.maps.Polygon({
          paths: triangleCoords,
            strokeWeight: 2,
            fillOpacity: 0.45,
            fillColor: '#ffffff',
            strokeColor: '#ffffff',
          editable: true,
        });
        bermudaTriangle.setMap(map);
        //google.maps.event.addListener(bermudaTriangle, 'dragend', getPolygonCoords);
        //google.maps.event.addListener(bermudaTriangle.getPath(), 'insert_at', getPolygonCoords);
        //google.maps.event.addListener(bermudaTriangle.getPath(), 'remove_at', getPolygonCoords);
        //google.maps.event.addListener(bermudaTriangle.getPath(), 'set_at', getPolygonCoords);     
    
};

google.maps.event.addDomListener(window, "load", initMap);

function getPolygonCoords() {
     var len = bermudaTriangle.getPath().getLength();
    var htmlStr = "";
    for (var i = 0; i < len; i++) {
    htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(6) + "<br>";
    }
    document.getElementById('coords').value = htmlStr;
}

function getCoordinates(index, element) {
    document.getElementById('coords').value = overlay.getPath().getArray();
}

function clearSelection() {
  if (selectedShape) {
    selectedShape.setEditable(false);
    selectedShape = null;
  }
}

function setSelection(shape) {
  clearSelection();
  selectedShape = shape;
  shape.setEditable(true);
}

function deleteSelectedShape() {
  if (selectedShape) {
    selectedShape.setMap(null);
    // To show:
    drawingManager.setOptions({
      drawingControl: true
    });
  }
}
</script>
<style>
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
</style>
<input id="coords" style="width:600px" />
<input id="coordslatlan" style="width:600px" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=xxxx&libraries=drawing&callback=initMap" async defer></script>
<button id="delete-button">Delete Selected Shape</button>

getPolygonCoords 不起作用。能否请你帮忙。

示例代码：没有getPolygonCoords 函数

使用getPolygonCoords 函数

谢谢

标签： map-api