我正在使用谷歌地图来定义城市的区域。用户绘制多边形以确定所需区域。为了达到这个目标,我引用了 DrawingManager 文章 this article .一切顺利,我想更新注册区域并绘制多边形。我想遵循的路径是使用 DrawingManager。这是我的代码。代码正确加载 map ,但它不会根据给定坐标绘制我的多边形。
GoogleMap.prototype.initial = function (currentPolygonData) {
var self = this;
var triangleCoords = [];
if (currentPolygonData != null && currentPolygonData.length>0) {
triangleCoords = [];
for (var i = 0; i < currentPolygonData.length; i++) {
triangleCoords.push(new google.maps.LatLng(currentPolygonData[i].Lat, currentPolygonData[i].Lng));
}
}
var polyOptions = {
paths: triangleCoords,
strokeColor: '#bb4446',
fillColor: '#c37172',
strokeWeight: 0,
fillOpacity: 0.45,
editable: true,
draggable: true,
};
self.drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControlOptions: {
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true,
draggable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: self.map
});}
最佳答案
LatLng 集合的数据类型应该是一个字典数组,键分别为纬度和经度的“lat”和“lng”。
因此在你的代码中它应该是
var triangleCoordsArr = {};
if (currentPolygonData != null && currentPolygonData.length>0) {
for (var i = 0; i < currentPolygonData.length; i++) {
triangleCoords = {};
triangleCoords['lat'] = currentPolygonData[i].Lat;
triangleCoords['lng'] = currentPolygonData[i].Lng;
triangleCoordsArr.push(triangleCoords)
}
}
for (var i = 0; i < triangleCoordsArr.length; i++) {
// Construct the polygon.
var mTriangle = new google.maps.Polygon({
paths: triangleCoordsArr[i],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
mTriangle.setMap(map);
}
还有,这里是reference link from Maps Documentation应该有助于获得更多信息来解决您的问题
关于javascript - 如何使用谷歌地图 DrawManager 以编程方式绘制多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46053192/