找到一个给定的半径

Question

里面输入的所有标记：给定一个具体的坐标（纬度和经度）和半径 输出：显示所有驻留从标记给出列表循环下的标记。

我怎么能在谷歌地图这样做呢？

Answer 1

只是遍历所有你必须标记并使用以下函数获取标记从具体坐标的距离：computeDistanceBetween()：

要计算这个距离，可以呼叫computeDistanceBetween（），它传递 两个LatLng对象。

我发现它是here。然后过滤掉所有足够接近的标记。

Answer 2

见给这个问题的答案：Google Maps Api v3 - find nearest markers

你基本上需要通过你的标记阵列循环，并用一个公式来从给定的点计算出它们的距离（圆心代表你的搜索半径）。

然后，您可以排除这比半径更远的任何标记，你将留下哪些是圈子里面的标记列表广告。

Answer 3

装入geometry library和使用computeDistanceBetween()从您的中心点找到的每个标记的距离。

如果距离为半径内，显示标记。

Answer 4

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); 
} 

Answer 5

这是一个工作示例。点击地图绘制与选定的半径的半径，它会显示所有从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 = [ 
 
\t {type: "Restaurant", name: "Restaurant 1", lat: 40.723080, lng: -73.984340}, 
 
\t {type: "School", name: "School 1", lat: 40.724705, lng: -73.986611}, 
 
\t {type: "School", name: "School 2", lat: 40.724165, lng: -73.983883}, 
 
\t {type: "Restaurant", name: "Restaurant 2", lat: 40.721819, lng: -73.991358}, 
 
\t {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); 
 
\t 
 
\t google.maps.event.addListener(map, 'click', showCloseLocations); 
 
    }); 
 
    
 
    function showCloseLocations(e) { 
 
    \t var i; 
 
    \t var radius_km = $('#radius_km').val(); 
 
    \t var address = $('#address').val(); 
 

 
    \t //remove all radii and markers from map before displaying new ones 
 
    \t if (radius_circle) { 
 
    \t \t radius_circle.setMap(null); 
 
    \t \t radius_circle = null; 
 
    \t } 
 
    \t for (i = 0; i < markers_on_map.length; i++) { 
 
    \t \t if (markers_on_map[i]) { 
 
    \t \t \t markers_on_map[i].setMap(null); 
 
    \t \t \t markers_on_map[i] = null; 
 
    \t \t } 
 
    \t } 
 
\t 
 
    \t var address_lat_lng = e.latLng; 
 
    \t radius_circle = new google.maps.Circle({ 
 
    \t \t center: address_lat_lng, 
 
    \t \t radius: radius_km * 1000, 
 
    \t \t clickable: false, 
 
    \t \t map: map 
 
    \t }); 
 
\t if(radius_circle) map.fitBounds(radius_circle.getBounds()); 
 
    \t for (var j = 0; j < all_locations.length; j++) { 
 
    \t \t (function (location) { 
 
    \t \t \t var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng); 
 
    \t \t \t var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker 
 
    \t \t \t if (distance_from_location <= radius_km * 1000) { 
 
    \t \t \t \t var new_marker = new google.maps.Marker({ 
 
    \t \t \t \t \t position: marker_lat_lng, 
 
    \t \t \t \t \t map: map, 
 
    \t \t \t \t \t title: location.name 
 
    \t \t \t \t }); 
 
    \t \t \t \t google.maps.event.addListener(new_marker, 'click', function() { 
 
    \t \t \t \t \t alert(location.name + " is " + distance_from_location + " meters from my location"); 
 
    \t \t \t \t }); 
 
    \t \t \t \t markers_on_map.push(new_marker); 
 
    \t \t \t } 
 
    \t \t })(all_locations[j]); 
 
    \t } 
 
    }

<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"> 
 
\t <option value=1>1km</option> 
 
\t <option value=2>2km</option> 
 
\t <option value=5>5km</option> 
 
\t <option value=30>30km</option> 
 
</select> 
 
<div id="map_canvas" style="width:500px; height:300px;"> 
 
</body>