Question

这是在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”参数。

Answer 1

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

var polygons = [];

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

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

为了让用户能够在创建后编辑策略，您必须在setEditable事件结束时致电polygonComplete

polygon.setEditable(true);

如果你需要读取多边形顶点的所有lat / lng，你可以使用这个代码示例：

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

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

Answer 2

只需复制然后再使用。

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

数组包含Google地图drawingManager中多边形的纬度和经度

2 个答案: