Google maps 使用Google Map API v3绘制多边形并获取坐标

我正在尝试使用GoogleMapsAPIv3开发一个应用程序。我想做的是；首先让用户在谷歌地图上画一个多边形，得到他/她的多边形坐标并将其保存到数据库中。然后我将显示用户保存的坐标

我不知道如何让用户使用API v3在谷歌地图上绘制多边形，然后获得坐标。如果我能得到这些坐标，很容易将它们保存到数据库中

是一个几乎完全相同的示例，但它使用APIv2，并且没有给出坐标。我想使用API v3并能够获得所有坐标

---

是否有使用API v3绘制多边形并获取其坐标的示例？

这里有使用API v3的上述示例

---

要完成所需的操作，必须从多边形获取路径。路径将是一组LatLng点。获取数组元素并使用.lat和.lng方法拆分LatLng对在下面的函数中，我有一个冗余数组，对应于标记多边形周围周长的多段线

储蓄是另一回事。然后，您可以选择多种方法。您可以将点列表保存为csv格式的字符串，并将其导出到文件中（目前为止，最简单的解决方案）。我强烈推荐GPS TXT格式，比如GPS TRACKMAKER（伟大的免费版软件）可读的格式（有2种）。如果您有能力将它们保存到数据库中，这是一个很好的解决方案（为了冗余，我两者都做）

功能区域周边路径（区域周边路径）{
var flag1stLoop=true；
var areaPerimeterPath数组=areaPerimeterPath.getPath（）；
var markerListParsedText=“数据，WGS84，WGS84,0,0,0,0\r\n”；
var=0；
var jSpy=“”；
对于（var j=0；j，其他答案显示如何创建多边形，但不显示如何获取坐标

我不确定最好的方法是什么，但这里有一种方法..似乎应该有一种方法可以从多边形获取路径，但我找不到，而且getPath（）似乎对我不起作用。所以这里有一种手动方法对我有效

完成多边形的绘制并将多边形传递给overlay complete函数后，可以在polygon.overlay.latLngs.b[0].b中找到坐标

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
        $.each(polygon.overlay.latLngs.b[0].b, function(key, latlng){
            var lat = latlng.d;
            var lon = latlng.e;
            console.log(lat, lon); //do something with the coordinates
        });
});

注意，我使用jquery在坐标列表上循环，但是您可以执行循环。
添加到Gisheri的答案中

下面的代码对我有用

 var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }

  });

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
      //console.log(polygon.overlay.latLngs.j[0].j);return false;
        $.each(polygon.overlay.latLngs.j[0].j, function(key, LatLongsObject){
            var LatLongs    =   LatLongsObject;

            var lat = LatLongs.k;
            var lon = LatLongs.B;
           console.log("Lat is: "+lat+" Long is: "+lon); //do something with the coordinates

        });

使用google提供的getter比像某些人那样访问属性更干净/安全

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
    var coordinatesArray = polygon.overlay.getPath().getArray();
});

如果您需要的只是坐标，这里有一个我喜欢使用的绘图工具-移动多边形或重新塑造它，坐标将显示在地图的正下方：

还有，这里有一个

JS

var bermudaTriangle;
function initialize() {
    var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
    var mapOptions = {
        zoom: 12,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.RoadMap
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
                                  mapOptions);


    var triangleCoords = [
        new google.maps.LatLng(33.5362475, -111.9267386),
        new google.maps.LatLng(33.5104882, -111.9627875),
        new google.maps.LatLng(33.5004686, -111.9027061)

    ];

    // Construct the polygon
    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        draggable: true,
        editable: true,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

    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);
}

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

#map-canvas {
    width: auto;
    height: 350px;
}
#info {
    position: absolute;
    font-family: arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

嗯，不幸的是，如果一个人是匿名的/没有登录的（如果我没记错的话，几年前是可能的），那么他似乎无法放置自定义标记并直接从maps.google.com绘制（和获取坐标）。尽管如此，多亏了这里的答案，我还是成功地结合了一些示例，这些示例既有Google Places搜索功能，也允许通过绘图库绘图，并且在选择任何类型的可复制形状（包括多边形坐标）时转储坐标；代码如下：




这就是它的样子：


（位置标记单独处理，可通过搜索输入表单元素通过DEL“button”删除；“curpos”显示地图视口的当前中心[位置]和缩放级别）.
由于谷歌有时会更新固定对象属性的名称，因此最佳做法是使用GMAPSv3方法获取坐标event.overlay.getPath（）.getArray（），以及获取latlatlng.lat（）和lnglatlng.lng（）

所以，我只是想通过多边形和POSTGIS插入案例场景来改进这个答案：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    var str_input ='POLYGON((';
    if (event.type == google.maps.drawing.OverlayType.POLYGON) {
      console.log('polygon path array', event.overlay.getPath().getArray());
      $.each(event.overlay.getPath().getArray(), function(key, latlng){
        var lat = latlng.lat();
        var lon = latlng.lng();
        console.log(lat, lon); 
        str_input += lat +' '+ lon +',';
      });
    }
    str_input = str_input.substr(0,str_input.length-1) + '))';
    console.log('the str_input will be:', str_input);

    // YOU CAN THEN USE THE str_inputs AS IN THIS EXAMPLE OF POSTGIS POLYGON INSERT
    // INSERT INTO your_table (the_geom, name) VALUES (ST_GeomFromText(str_input, 4326), 'Test')

  });

清理Chuycepda拥有的内容，并将其放入文本区域，以表单形式发送回去

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
    var str_input = '{';
    if (event.type == google.maps.drawing.OverlayType.POLYGON) {
        $.each(event.overlay.getPath().getArray(), function (key, latlng) {
            var lat = latlng.lat();
            var lon = latlng.lng();
            str_input += lat + ', ' + lon + ',';
        });
    }
    str_input = str_input.substr(0, str_input.length - 1) + '}';

    $('textarea#Geofence').val(str_input);
});

试试这个

在您的控制器中使用

> $scope.onMapOverlayCompleted = onMapOverlayCompleted;
> 
>  function onMapOverlayCompleted(e) {
> 
>                 e.overlay.getPath().getArray().forEach(function (position) {
>                     console.log('lat', position.lat());
>                     console.log('lng', position.lng());
>                 });
> 
>  }

**In Your html page , include drawning manaer** 


    <ng-map id="geofence-map" zoom="8" center="current" default-style="true" class="map-layout map-area"
                        tilt="45"
                        heading="90">

                    <drawing-manager
                            on-overlaycomplete="onMapOverlayCompleted()"
                            drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','circle']}"
                            drawingControl="true"
                            drawingMode="null"
                            markerOptions="{icon:'www.example.com/icon'}"
                            rectangleOptions="{fillColor:'#B43115'}"
                            circleOptions="{fillColor: '#F05635',fillOpacity: 0.50,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
                    </drawing-manager>
    </ng-map>

$scope.onMapOverlayCompleted=onMapOverlayCompleted；
> 
>已完成的最大覆盖功能（e）{
> 
>e.overlay.getPath（）.getArray（）.forEach（函数（位置）{
>console.log（'lat'，position.lat（））；
>console.log（'lng'，position.lng（））；
>                 });
> 
>  }
**在html页面中，包括绘图管理器**
很好的例子，但是我们如何获得生成它的代码呢？显然，代码在，但现在似乎已经被破坏了：如果我放置一个标记，我会得到“placemark_1（NaN，NaN）”从链接中复制一些有用的内容，然后放置一个参考，这始终是一个很好的做法。现在，链接上的地图工作不正常。我可以获取多边形边界吗？不是位置而是边界。我想获取边界并对边界内的坐标进行db搜索。我们如何获取给定区域的坐标r latitude and latitude to Drawing polygon@jhawessimply perfect+++非常感谢代码示例，我使用它将此功能合并到Angular2应用程序（）中，它使用Ng2映射指令（）工作正常有机会让用户进入哪个广场吗？使用mysql查询，我有许多餐厅预定义的配送区域，非常感谢您保存了我的日期gmaps-samples-v3中的最新样本现在位于Github上
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
    var str_input = '{';
    if (event.type == google.maps.drawing.OverlayType.POLYGON) {
        $.each(event.overlay.getPath().getArray(), function (key, latlng) {
            var lat = latlng.lat();
            var lon = latlng.lng();
            str_input += lat + ', ' + lon + ',';
        });
    }
    str_input = str_input.substr(0, str_input.length - 1) + '}';

    $('textarea#Geofence').val(str_input);
});

> $scope.onMapOverlayCompleted = onMapOverlayCompleted;
> 
>  function onMapOverlayCompleted(e) {
> 
>                 e.overlay.getPath().getArray().forEach(function (position) {
>                     console.log('lat', position.lat());
>                     console.log('lng', position.lng());
>                 });
> 
>  }

**In Your html page , include drawning manaer** 


    <ng-map id="geofence-map" zoom="8" center="current" default-style="true" class="map-layout map-area"
                        tilt="45"
                        heading="90">

                    <drawing-manager
                            on-overlaycomplete="onMapOverlayCompleted()"
                            drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','circle']}"
                            drawingControl="true"
                            drawingMode="null"
                            markerOptions="{icon:'www.example.com/icon'}"
                            rectangleOptions="{fillColor:'#B43115'}"
                            circleOptions="{fillColor: '#F05635',fillOpacity: 0.50,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
                    </drawing-manager>
    </ng-map>