2

这是在 Google 地图上添加绘图管理器以按用户绘制多边形、圆形、矩形等的最简单方法。

代码：

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=drawing"></script>

<script>
function initialize()
{
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: new google.maps.LatLng(32.344, 51.048)});

    var drawingManager = new google.maps.drawing.DrawingManager();
    drawingManager.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div style="width:1024px; height:768px;" id="map"></div>
</body>

</html>

我的问题：似乎你用这个工具画了一个多边形。您如何读取或创建包含该多边形的纬度和经度的数组？

编辑：还有别的，也许用户在创建后编辑多边形，所以编辑后也应该可以读取这个数组，我认为我们不能通过点击地图来使用“e”参数。

4

2 回答 2

17

创建一个包含多边形的全局数组

var polygons = [];

polygoncomplete然后，在event中填充您的数组：

google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
    polygons.push(polygon);

为了让用户能够在创建后编辑 polgon，您必须在活动setEditable结束时调用polygonComplete

polygon.setEditable(true);

如果您需要读取多边形顶点的所有纬度/经度，您可以使用以下代码示例：

var polygonBounds = polygon.getPath();
var coordinates = [];

for(var i = 0 ; i < polygonBounds.length ; i++)
{
    coordinates.push(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng());
}
于 2013-10-21T07:48:33.880 回答
1

只需复制然后使用。

<html>

<!--Here you will create a polygon by tools that Google maps "drawingManager" gives to you and then you have an array named "coordinates" as an output. This array saves all latLng of the polygon. When you edit the polygon it also edit this variable too.
!-->

<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=drawing"></script>

<!--Global variables!-->
<script>
//This variable gets all coordinates of polygone and save them. Finally you should use this array because it contains all latitude and longitude coordinates of polygon.
var coordinates = [];

//This variable saves polygon.
var polygons = [];
</script>

<script>
//This function save latitude and longitude to the polygons[] variable after we call it.
function save_coordinates_to_array(polygon)
{
    //Save polygon to 'polygons[]' array to get its coordinate.
    polygons.push(polygon);

    //This variable gets all bounds of polygon.
    var polygonBounds = polygon.getPath();

    for(var i = 0 ; i < polygonBounds.length ; i++)
    {
        coordinates.push(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng());
        alert(i);
    }   
}
</script>

<script>
function initialize()
{
    //Create a Google maps.
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: new google.maps.LatLng(32.344, 51.048)});

    //Create a drawing manager panel that lets you select polygon, polyline, circle, rectangle or etc and then draw it.
    var drawingManager = new google.maps.drawing.DrawingManager();
    drawingManager.setMap(map);

    //This event fires when creation of polygon is completed by user.
    google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
        //This line make it possible to edit polygon you have drawed.
        polygon.setEditable(true);

        //Call function to pass polygon as parameter to save its coordinated to an array.
        save_coordinates_to_array(polygon);

        //This event is inside 'polygoncomplete' and fires when you edit the polygon by moving one of its anchors.
        google.maps.event.addListener(polygon.getPath(), 'set_at', function () {
            alert('changed');
            save_coordinates_to_array(polygon);
            });

        //This event is inside 'polygoncomplete' too and fires when you edit the polygon by moving on one of its anchors.
        google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
            alert('also changed');
            save_coordinates_to_array(polygon);
            });
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div style="width:1024px; height:768px;" id="map"></div>
</body>

</html>
于 2013-10-21T11:19:48.180 回答