Javascript 查找给定半径内的所有标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10295371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Finding all the markers inside a given radius
提问by Suraj Chawda
Input: Given a specific co-ordinate (latitude and longitude) and radius Output: Displaying all the markers which reside under that circle from given list of markers.
输入：给定一个特定的坐标（纬度和经度）和半径输出：显示给定标记列表中位于该圆下的所有标记。
How can I do this in google maps?
我怎样才能在谷歌地图中做到这一点？
回答by Boris Strandjev
Just iterate all the markers you have and use the following function to get the distance from the specific co-ordinate to the marker: computeDistanceBetween():
只需迭代您拥有的所有标记并使用以下函数来获取从特定坐标到标记的距离computeDistanceBetween()：：
To compute this distance, call computeDistanceBetween(), passing it two LatLng objects.
要计算此距离，请调用 computeDistanceBetween()，将两个 LatLng 对象传递给它。
I found it over here. Then just filter out all the markers that turn out to be close enough.
我在这里找到的。然后过滤掉所有足够接近的标记。
回答by shashankaholic
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);
}
回答by Matej P.
Here is a working example. Click map to draw a radius with selected radius and it would display all the markers from all_locationsexample array which fall inside the radius. Click on a marker to see the distance in meters from the radius center. (Click somewhere around New York's Second Street to see the example markers - map is already centered to that location)
这是一个工作示例。单击地图以选定半径绘制半径，它将显示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>回答by Andrew Leach
Load the geometry libraryand use computeDistanceBetween()to find the distance of each marker from your centre point.
加载几何库并用于computeDistanceBetween()查找每个标记与中心点的距离。
If the distance is within the radius, display the marker.
如果距离在半径范围内，则显示标记。
回答by beeglebug
See the answer given to this question: Google Maps Api v3 - find nearest markers
请参阅此问题的答案：Google Maps Api v3 - find Nearest marker
You basically need to loop through your array of markers, and use a formula to calculate their distance from a given point (the center of the circle representing your search radius).
您基本上需要遍历标记数组，并使用公式计算它们与给定点（代表搜索半径的圆心）的距离。
You can then exclude any markers which are further away than the radius, ad you will be left with a list of markers which are inside the circle.
然后，您可以排除比半径更远的任何标记，您将看到圆圈内的标记列表。
