查找给定半径内的所有标记
Finding all the markers inside a given radius
本文关键字:查找 更新时间:2023-09-26
>输入:给定特定的坐标(纬度和经度)和半径输出:显示给定标记列表中驻留在该圆圈下的所有标记。
如何在谷歌地图中做到这一点?
只需迭代您拥有的所有标记,然后使用以下函数来获取从特定坐标到标记的距离: computeDistanceBetween()
:
要计算这个距离,请调用 computeDistanceBetween(),向其传递两个 LatLng 对象。
我在这里找到了它。然后只需过滤掉所有足够接近的标记。
var targetLat=marker.getPosition().lat();
var targetLng=marker.getPosition().lng();
var targetLoc = new GLatLng(targetLat,targetLng);
var center= new GLatLng(centerLat, centerLng);
var distanceInkm=center.distanceFrom(targetLoc) / 1000;
if(distanceInkm < radius){
// To add the marker to the map, call setMap();
marker.setMap(map);
}
这是一个工作示例。单击地图以绘制具有选定半径的半径,它将显示all_locations
示例数组中落在半径内的所有标记。单击标记以查看距半径中心的距离(以米为单位)。(单击纽约第二街周围的某个地方以查看示例标记 - 地图已经以该位置为中心)
var map = null;
var radius_circle = null;
var markers_on_map = [];
//all_locations is just a sample, you will probably load those from database
var all_locations = [
{type: "Restaurant", name: "Restaurant 1", lat: 40.723080, lng: -73.984340},
{type: "School", name: "School 1", lat: 40.724705, lng: -73.986611},
{type: "School", name: "School 2", lat: 40.724165, lng: -73.983883},
{type: "Restaurant", name: "Restaurant 2", lat: 40.721819, lng: -73.991358},
{type: "School", name: "School 3", lat: 40.732056, lng: -73.998683}
];
//initialize map on document ready
$(document).ready(function(){
var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
var myOptions = {
zoom: 14,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', showCloseLocations);
});
function showCloseLocations(e) {
var i;
var radius_km = $('#radius_km').val();
var address = $('#address').val();
//remove all radii and markers from map before displaying new ones
if (radius_circle) {
radius_circle.setMap(null);
radius_circle = null;
}
for (i = 0; i < markers_on_map.length; i++) {
if (markers_on_map[i]) {
markers_on_map[i].setMap(null);
markers_on_map[i] = null;
}
}
var address_lat_lng = e.latLng;
radius_circle = new google.maps.Circle({
center: address_lat_lng,
radius: radius_km * 1000,
clickable: false,
map: map
});
if(radius_circle) map.fitBounds(radius_circle.getBounds());
for (var j = 0; j < all_locations.length; j++) {
(function (location) {
var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
if (distance_from_location <= radius_km * 1000) {
var new_marker = new google.maps.Marker({
position: marker_lat_lng,
map: map,
title: location.name
});
google.maps.event.addListener(new_marker, 'click', function () {
alert(location.name + " is " + distance_from_location + " meters from my location");
});
markers_on_map.push(new_marker);
}
})(all_locations[j]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false&libraries=geometry"});
</script>
<body style="margin:0px; padding:0px;" >
<select id="radius_km">
<option value=1>1km</option>
<option value=2>2km</option>
<option value=5>5km</option>
<option value=30>30km</option>
</select>
<div id="map_canvas" style="width:500px; height:300px;">
</body>
加载几何库并使用computeDistanceBetween()
查找每个标记与中心点的距离。
如果距离在半径范围内,则显示标记。
请参阅此问题的答案: 谷歌地图 API v3 - 查找最近的标记
您基本上需要遍历标记数组,并使用公式计算它们与给定点(代表搜索半径的圆心)的距离。
然后,您可以排除任何比半径更远的标记,然后您将留下圆圈内的标记列表。
相关文章:
- 正在全局范围中查找JavaScript函数
- Javascript(Angular)从一个对象数组到第二个数组查找值
- 在不使用jquery的情况下查找页面中的所有锚点并附加函数
- es6 相当于下划线查找位置
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何在不传递此信息的情况下查找被调用的元素
- Lodash 从值数组中查找数组中的值
- 如何使用JavaScript查找1和N之间的所有数字的总和
- 使用RegExp查找url中的字符
- 查找元素高度,包括边距
- 使用JS查找数组的平均值
- 查找最短和最长日期
- 猫鼬在特定记录中查找嵌套记录
- 使用javascript在MVC中查找网格长度时出错
- 在Javascript数组中查找绝对最大值
- 在javascript中查找单词
- JavaScript 在数组中查找缺少的数字
- 键按正则表达式以查找具有负值的小数
- 为什么可以't Protractor在自动初始化的Angular网站上查找Angular