找到一個給定的半徑

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>