查找给定半径内的所有标记
[英]Finding all the markers inside a given radius
问题描述
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?我怎样才能在谷歌地图中做到这一点？
5 个解决方案
解决方案1
28 已采纳 2012-04-24 09:48:40
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.
I found it over here .我在这里找到的。 Then just filter out all the markers that turn out to be close enough.然后过滤掉所有足够接近的标记。
解决方案2
8 2012-04-24 10:00:13
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);
}
解决方案3
6 2016-05-07 12:16:30
Here is a working example.这是一个工作示例。 Click map to draw a radius with selected radius and it would display all the markers from all_locations example array which fall inside the radius.单击地图以选定半径绘制半径，它将显示all_locations示例数组中落在半径内的所有标记。 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) （单击纽约第二街附近的某处以查看示例标记 - 地图已经以该位置为中心）
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>
解决方案4
2 2012-04-24 09:49:32
Load the geometry library and use computeDistanceBetween() to find the distance of each marker from your centre point.加载几何库并使用computeDistanceBetween()找到每个标记与中心点的距离。
If the distance is within the radius, display the marker.如果距离在半径范围内，则显示标记。
解决方案5
1 2012-04-24 09:48:47
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.然后，您可以排除比半径更远的任何标记，您将看到圆圈内的标记列表。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.