如何在放置标记时获取多边形属性 [英] How to get polygon properties when a marker is placed on it
问题描述
使用Google地图绘图管理器用户绘制多边形。当标记（绘图管理器中的标记）放置在其上时，我想获取多边形属性（标题，路径，..）。在这里，我想知道如何获得多边形的属性（标题，路径），然后喜欢它在一个变量。
代码：
< html>
< head>
< title>获取多边形的纬度和经度坐标 - Google Maps API v3< / title>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?v=3.17&libraries=drawing&sensor=true>< /脚本>
< script type =text / javascriptsrc =gmaps.js>< / script>
< script type =text / javascriptsrc =https://code.jquery.com/jquery-1.10.2.min.jscharset =UTF-8>< / script> ;
< script type =text / javascript>
$（document）.ready（function（）{
var mapHeight ='400px';
$（'＃map-canvas'）。css（'height'，mapHeight）;
mymap = new GMaps（{
div：'＃map-canvas'，
lat：47.53187912201915，
lng：7.705222390807307，
zoom：20，
zoomControl：true，
mapTypeId：'satellite'
}）;
map = mymap.map;
map_drawingManager = new google.maps.drawing.DrawingManager（{
drawingMode：null，
drawingControlOptions：{
position：google.maps.ControlPosition.TOP_LEFT，
drawingModes：[
google.maps.drawing.OverlayType.MARKER，
google.maps.drawing.OverlayType.POLYGON
]
}，
// drawingMode：google.maps.drawing.OverlayType.POLYGON，
markerOptions：{
draggable ：true，
}，
polylineOptions：{
editable：true
}，
map：map
}）;
}）;
< / script>
< / head>
< body>
< div id =map-canvasstyle =height：350px; width：auto;>
< / div>
< div id =infostyle =position：absolute; font-family：Arial; font-size：14px;>
< / div>
< / body>
< / html>
当我在上面放置标记时，显示多边形属性的警报信息就可以了。希望有可能。
您需要声明一个数组来保存用户绘制的每个多边形，然后当用户添加标记时，将需要迭代你的多边形阵列，直到找到包含标记的一个。这是通过将监听器添加到Drawingmanager的polygoncomplete和markercomplete事件来完成的。
var polygonArray = [];
google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{
polygonArray.push（polygon）;
}）;
google.maps.event.addListener（drawingManager，'markercomplete'，function（marker）{
polygonArray.forEach（function（polygon）{
if（google.maps。 geometry.poly.containsLocation（marker.getPosition（），polygon））{
console.log（'在多边形内添加标记'，多边形）;
}
}）;
}）;
编辑：我在包含位置后遗漏了一个右括号
看到它工作在： http://jsfiddle.net/amenadiel/zfvyou0b/
Using google map Drawing Manager user draws the polygon .I want to get polygon properties(title,paths,..) when a marker(marker from drawing manager) is placed on it. Here I want to know how to get the properties of the polygon(title, paths) and then like to it in a variable.
code :
<html>
<head>
<title>Get Latitude and Longitude Coordinates of a Polygon - Google Maps API v3</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.17&libraries=drawing&sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
var mapHeight = '400px';
$('#map-canvas').css('height', mapHeight);
mymap = new GMaps({
div: '#map-canvas',
lat: 47.53187912201915,
lng: 7.705222390807307,
zoom: 20,
zoomControl: true,
mapTypeId: 'satellite'
});
map = mymap.map;
map_drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.POLYGON
]
},
//drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true,
},
polylineOptions: {
editable: true
},
map: map
});
});
</script>
</head>
<body>
<div id="map-canvas" style="height: 350px; width: auto;">
</div>
<div id="info" style="position: absolute; font-family: Arial; font-size: 14px;">
</div>
</body>
</html>
It would be fine to show a alert message of the polygon properties When I place the marker on it. Hope There will be possible for this.
You would need to declare an array holding every polygon that the user draws and then, when the user adds a marker, you would need to iterate over your polygonarray until you find one that contains the marker. This is done by adding listeners to Drawingmanager's polygoncomplete and markercomplete events.
var polygonArray=[];
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
polygonArray.push(polygon);
});
google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
polygonArray.forEach(function(polygon) {
if(google.maps.geometry.poly.containsLocation(marker.getPosition(), polygon)) {
console.log('Marker added inside polygon',polygon);
}
});
});
Edit: I was missing a closing parenthesis after containsLocation
See it working at: http://jsfiddle.net/amenadiel/zfvyou0b/
这篇关于如何在放置标记时获取多边形属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
