获取多边形所有点的数组 - Google Maps Drawing Tool API-3 [英] Get Array of all points of Polygon - Google Maps Drawing Tool API-3
问题描述
我正在使用谷歌绘图工具在谷歌地图上绘制多边形/矩形,现在我需要显示落在绘制多边形内的标记,为此我使用了 geometry.poly.containsLocation 方法,它需要一个点(latLng)和一组多边形点.如果我使用 maps.polygon 我可以通过 poly.getPath() 获得多边形点但是因为我使用的是 Google 绘图工具 使用 maps.drawing.DrawingManager/google.maps.drawing.OverlayType.POLYGON 所以不确定如何在这里找到点.谢谢
i am using Google Drawing tools for drawing polygon/rectangle on google maps, now i need to show markers that falls inside the drawn polygon and for that i am using geometry.poly.containsLocation method which takes a point(latLng) and an array of polygon points. if i use maps.polygon I can get polygon points via poly.getPath() but because i am using Google Drawing tools which uses maps.drawing.DrawingManager/google.maps.drawing.OverlayType.POLYGON so not sure how to find points here. Thanks
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'images/car-icon.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
fillOpacity: 0.5,
strokeWeight: 2,
strokeColor:'#57ACF9',
clickable: false,
editable: false,
zIndex: 1
}
});
console.log(drawingManager)
drawingManager.setMap(map)
推荐答案
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
// assuming you want the points in a div with id="info"
document.getElementById('info').innerHTML += "polygon points:" + "<br>";
for (var i = 0; i < polygon.getPath().getLength(); i++) {
document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
}
});
代码片段:
var geocoder;
var map;
var polygonArray = [];
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
/* not useful on jsfiddle
markerOptions: {
icon: 'images/car-icon.png'
}, */
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
fillOpacity: 0.5,
strokeWeight: 2,
strokeColor: '#57ACF9',
clickable: false,
editable: false,
zIndex: 1
}
});
console.log(drawingManager)
drawingManager.setMap(map)
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
document.getElementById('info').innerHTML += "polygon points:" + "<br>";
for (var i = 0; i < polygon.getPath().getLength(); i++) {
document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
}
polygonArray.push(polygon);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style=" border: 2px solid #3872ac;"></div>
<div id="info"></div>
这篇关于获取多边形所有点的数组 - Google Maps Drawing Tool API-3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!