获取Polygon所有点的数组 - Google Maps绘图工具API-3 [英] Get Array of all points of Polygon - Google Maps Drawing Tool API-3
问题描述
我正在使用Google绘图工具在Google地图上绘制多边形/矩形,现在我需要显示落入绘制的多边形内的标记,并且为此我使用了geometry.poly.containsLocation方法,该方法需要一个点(latLng)和一个多边形点阵列。如果我使用maps.polygon,我可以通过poly.getPath()获取多边形点,但因为我使用 Google绘图工具,它使用maps.drawing.DrawingManager / google.maps.drawing.OverlayType.POLYGON,所以不知道如何在这里找到要点。谢谢
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:{
图标:'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){
//假设您想要div with id =info
document.getElementById('info')。innerHTML + =polygon points:+< br>;
for(var i = 0; i< innerHTML + = polygon.getPath()。getAt(i).toUrlValue(6)+< br> getLength(); i ++){
document.getElementById('info')。 ;
}
});
代码段:
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 {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;宽度:500px; margin:0px;
< script src =https:// //maps.googleapis.com/maps/api/js?libraries=geometry,drawing\"></script><div id =map_canvasstyle =border:2px solid#3872ac;>< / div>< div id =info>< / div>
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>";
}
});
code snippet:
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"></script>
<div id="map_canvas" style=" border: 2px solid #3872ac;"></div>
<div id="info"></div>
这篇关于获取Polygon所有点的数组 - Google Maps绘图工具API-3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!