如何计算google地图中多边形内的标记数 [英] how to calculate number of markers inside a polygon in google maps
本文介绍了如何计算google地图中多边形内的标记数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
寻找一种计算用户动态绘制的多边形内标记数量的方法
Looking for a way to count the number of markers inside a polygon which is drawn dynamically by the user
下面的代码可以绘制现在要显示的多边形如果存在
The code below can draw the polygon now i want to show the count of number of markers inside the polygon if there exists
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.17&AIzaSyBLnIMoOLvgLaeIUEzLX3sIw0-FOXwXcag"> </script>
<script>
function initMap() {
var mapOptions={
center:{lat: 27.174977,lng:78.042064},
zoom: 8
};
var map15= new google.maps.Map(document.getElementById("map"),mapOptions);
var polygon= new google.maps.Polygon({
strokeColor: "#1E41AA",
strokeOpacity: 1.0,
strokeWeight: 3,
map: map15,
fillColor: "#2652F2",
fillOpacity: 0.6
});
var poly= polygon.getPath();
function addPolyPoints(e){
poly.push(e.latLng);
}
google.maps.event.addListener(map15,'click',addPolyPoints);
}
initMap();
</script>
</body>
</html>
即，当用户绘制多边形时，如果存在标记，
ie, when the user draw the polygon the map if there exists a marker the count should be provided how to do it please help
推荐答案
- 保留对数组中标记的引用
- 使用
google.maps.geometry.poly.containsLocation（latLng，polygon）来迭代该数组，以确定标记是否在多边形中 - 输出结果。
- keep references to your markers in an array
- iterate through that array using
google.maps.geometry.poly.containsLocation(latLng,polygon)to determine if the marker is in the polygon or not - output the result.
代码段：
function initMap() {
var mapOptions = {
center: {
lat: 27.174977,
lng: 78.042064
},
zoom: 8
};
var map15 = new google.maps.Map(document.getElementById("map"), mapOptions);
var markers = []
google.maps.event.addListenerOnce(map15, 'bounds_changed', function() {
function getRandom(min, max) {
return Math.random() * (max - min + 1) + min;
}
var bounds = map15.getBounds();
for (var j = 0; j < 30; j++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(getRandom(bounds.getSouthWest().lat(), bounds.getNorthEast().lat()),
getRandom(bounds.getSouthWest().lng(), bounds.getNorthEast().lng())),
map: map15
});
markers.push(marker);
}
})
var polygon = new google.maps.Polygon({
strokeColor: "#1E41AA",
strokeOpacity: 1.0,
strokeWeight: 3,
map: map15,
fillColor: "#2652F2",
fillOpacity: 0.6
});
var poly = polygon.getPath();
function addPolyPoints(e) {
poly.push(e.latLng);
var markerCnt = 0;
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), polygon)) {
markerCnt++;
}
}
document.getElementById('info').innerHTML = "markers in polygon: " + markerCnt;
}
google.maps.event.addListener(map15, 'click', addPolyPoints);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="info"></div>
<div id="map"></div>
这篇关于如何计算google地图中多边形内的标记数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
