在GoogleMaps API中保存绘制的多边形 [英] Save drawn polygon in googlemaps api

问题描述

大家好，我尝试从google map api保存绘制的多边形，但我不知道如何.我想保存多边形(坐标或路径并以表格形式发送.这就是我所拥有的)直到现在，我都试图阅读文档，但是我不太了解.

Hello guys i try to save a drawn polygon from a google map api , and i don't know how.I want to save the polygon(coordinates, or path and send them in as a form .This is what i have until now, i tried to read the documentation but i can't understand so much.

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 46.435812, lng: 27.639917},
            zoom: 17,
            mapTypeId: 'hybrid'});

       var drawingManager = new google.maps.drawing.DrawingManager({
           drawingMode: google.maps.drawing.OverlayType.MARKER,
           drawingControl: true,
           drawingControlOptions: {
               position: google.maps.ControlPosition.TOP_CENTER,
               drawingModes: ['polygon']
           },
       });

       drawingManager.setMap(map);
    };
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBR0YEEOUbWC8qYTig79dMHfOzXR44wX5w&libraries=geometry,drawing&callback=initMap"></script>

推荐答案

对于多边形，请执行与在类似问题中相同的操作:

For a polygon, do the same thing as is done in the similar question: Saving coordinates and data from Google maps in a database, just use the appropriate event for a polygon (polygoncomplete) and process through the path, adding all the coordinates to your appropriate form field:

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  var coordStr = "";
  for (var i = 0; i < polygon.getPath().getLength(); i++) {
    coordStr += polygon.getPath().getAt(i).toUrlValue(6) + ";";
    console.log(coordStr);
    document.getElementById('coords').value = coordStr;
  }
});

概念提琴证明

代码段:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 46.435812,
      lng: 27.639917
    },
    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']
    },
  });
  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    var coordStr = "";
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      coordStr += polygon.getPath().getAt(i).toUrlValue(6) + ";";
    }
    document.getElementById('coords').value = coordStr;
  });
  drawingManager.setMap(map);
};
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<input id="coords" style="width:600px" />
<div id="map"></div>

这篇关于在GoogleMaps API中保存绘制的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！