使用 Google Map API v3 绘制多边形和获取坐标 [关闭]

Posted 2023-02-14

【中文标题】使用 Google Map API v3 绘制多边形和获取坐标 [关闭]

【英文标题】：Polygon Drawing and Getting Coordinates with Google Map API v3 [closed]

【发布时间】：2011-07-01 14:51:49

【问题描述】：

我正在尝试使用 Google Maps API v3 开发应用程序。我想做的是；首先让用户在谷歌地图上绘制一个多边形并获取他/她的多边形坐标并将它们保存到数据库中。然后我将显示用户保存的坐标。

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

http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html 几乎是确切的示例，但它使用 API v2 并且不提供坐标。我想使用 API v3 并能够获取所有坐标。

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

【问题讨论】：

gmaps-samples-v3 的最新样本现已在 Github github.com/googlemaps/js-samples

【参考方案1】：

这里有上面使用 API V3 的示例

http://nettique.free.fr/gmap/toolbar.html

【讨论】：

很好的例子，但是我们如何获得生成它的代码呢？

显然，代码在lib/mapToolbar.js，但现在似乎已损坏：如果我放置一个标记，我会得到“placemark_1 (NaN, NaN)”

从链接中复制有用的内容然后放置参考总是一个好习惯。现在，链接上的地图无法正常工作。

【参考方案2】：

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

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

function areaPerimeterParse(areaPerimeterPath) 
    var flag1stLoop = true;
    var areaPerimeterPathArray = areaPerimeterPath.getPath();
    var markerListParsedTXT = "Datum,WGS84,WGS84,0,0,0,0,0\r\n";

    var counter01 = 0;
    var jSpy = "";
    for (var j = 0;j<areaPerimeterPathArray.length;j++) 
        counter01++;
        jSpy += j+"  ";
        if (flag1stLoop) 
            markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,1'+'\r\n';
            flag1stLoop = false;
         else 
            markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
        

    
    // last point repeats first point
    markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(0).lat(), areaPerimeterPathArray.getAt(0).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
    return markerListParsedTXT;

注意，以“,1”（而不是“,0”）结尾的行开始一个新的多边形（这种格式允许您在同一个文件中保存多个多边形）。我发现 TXT 比基于 XML 的格式 GPX 和 KML 更易于阅读。

【参考方案3】：

其他答案告诉你如何创建多边形，而不是如何获取坐标...

我不确定最好的方法，但这是一种方法.. 似乎应该有一种方法可以从多边形中获取路径，但我找不到，而 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 来循环坐标列表，但是你可以循环。

【参考方案4】：

添加到 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

        );

【参考方案5】：

使用 google 提供的 getter 更清洁/更安全，而不是像某些人那样访问属性

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

【讨论】：

简直完美+++

【参考方案6】：

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

另外，这里有一个Codepen

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;

HTML

<body onload="initialize()">
    <h3>Drag or re-shape for coordinates to display below</h3>
    <div id="map-canvas">
    </div>
    <div id="info">
    </div>
</body>

CSS

#map-canvas 
    width: auto;
    height: 350px;

#info 
    position: absolute;
    font-family: arial, sans-serif;
    font-size: 18px;
    font-weight: bold;

【讨论】：

我可以得到 poligon 边界吗？不是位置，而是界限。我想获取边界并对边界内的坐标进行数据库搜索。

我们如何获得给定区域或纬度和经度的坐标以绘制多边形@jhawes

【参考方案7】：

好吧，不幸的是，如果一个匿名/未登录的人似乎无法放置自定义标记并直接从 maps.google.com 绘制（并获取坐标）（如果我没记错的话，几年前就有可能） .尽管如此，由于这里的答案，我设法组合了具有 Google Places 搜索的示例，并允许通过绘图库进行绘图，并在选择任何类型的形状（包括多边形的坐标）时转储坐标可以复制粘贴的；代码在这里：

https://gist.github.com/anonymous/68b8f6a586c512cfc768#file-gmaps-drawing-tools-places-htm

看起来是这样的：

（地点标记是单独处理的，可以通过搜索输入表单元素通过DEL“按钮”删除；“curpos”显示当前中心[位置]和地图视口的缩放级别）。

【讨论】：

非常感谢您提供的代码示例，我用它来将此功能合并到 Angular2 应用程序 (github.com/IAMtheIAM/angular2-webpack2-dotnet-starter) 中，并且使用 Ng2-Map 指令 (github.com/ng2-ui/map) 可以完美运行

有没有机会让用户进入哪个方格？使用 mysql 查询我有很多餐馆预定义的送货区域

非常感谢你拯救了我的一天

【参考方案8】：

由于 Google 有时会更新固定对象属性的名称，因此最佳做法是使用 GMaps V3 方法获取坐标event.overlay.getPath().getArray() 并获取纬度latlng.lat() 和 lng latlng.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')

  );

【参考方案9】：

清理 chuycepeda 拥有的内容并将其放入 textarea 中以表格形式发送回。

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

【参考方案10】：

试试这个

在你的控制器中使用

> $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>