如何使用Google Maps API捕捉Polygon的点位置？ [英] How do I capture point locations of Polygon with Google Maps API?

问题描述

使用Google Maps API绘图管理器，我想要收集用户绘制的多边形中每个点的位置。

我知道有一个 getPath（）函数，但我不确定在哪里使用它。

这是所有的代码I到目前为止：

  var map; var drawingManager; 
 
函数initialize（）{
 var mapOptions = {
 center：new google.maps.LatLng（45.13536，-100.762952），
 zoom：14，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 
 drawingManager = new google.maps.drawing.DrawingManager（{
 drawingMode：google.maps.drawing.OverlayType.POLYGON，
 drawingControl：false，
 polygonOptions： {
 fillColor：＃000000，
 fillOpacity：.6，
 strokeWeight：1，
 strokeColor：＃666666，
 clickable：false，
 editable：true，
 zIndex：1 
} 
}）; 
 
 drawingManager.setMap（map）; 
 
 google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{
 drawingManager.setDrawingMode（null）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
  

所以从这段代码中，我怎样才能使用 getPath（） code>函数来显示构成绘制的多边形的坐标？

解决方案

在polygoncomplete-回拨。

示例：

  google.maps.event.addListener （drawingManager，'polygoncomplete'，function（polygon）{
 drawingManager.setDrawingMode（null）; 
 var arr = []; 
 polygon.getPath（）。forEach（function（latLng）{ arr.push（latLng.toString（））;}）
 alert（arr.join（'，\ n'））; 
}）; 
  

它遍历路径（使用google.maps.MVCArray的forEach方法）并填充另一个带有LatLng的字符串表示的数组

Using the Google Maps API Drawing Manager, I want to collect the location of each point in the polygon that is drawn by a user.

I know there is a getPath() function, but I'm not sure where I use it.

This is all the code I have so far:

var map; var drawingManager;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(45.13536, -100.762952),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: false,
        polygonOptions: {
            fillColor: "#000000",
            fillOpacity: .6,
            strokeWeight: 1,
            strokeColor: "#666666",
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });

    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
        drawingManager.setDrawingMode(null);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

So from this code, how can I use the getPath() function to show the coordinates that make up the Polygon that is drawn?

解决方案

use it inside the polygoncomplete-callback.

example:

 google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    drawingManager.setDrawingMode(null);
    var arr=[];
    polygon.getPath().forEach(function(latLng){arr.push(latLng.toString());})
    alert(arr.join(',\n'));
});

it iterates over the path(using the forEach-method of a google.maps.MVCArray) and populates another array with the string-representations of the LatLng's

这篇关于如何使用Google Maps API捕捉Polygon的点位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！