在给定半径内找到所有的标记

Question

在给定半径内找到所有的标记

javascriptalgorithmgoogle-maps

25

输入：给定一个特定的坐标（纬度和经度）和半径。输出：显示所有在该圆圈内的标记，这些标记来自给定标记列表。

如何在Google地图中实现此功能？

- Suraj Chawda

5个回答

9

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

- shashankaholic

2

GLatLng在V3中已被弃用，现在称为google.maps.LatLng。 - Semicolon

6

这里有一个可工作的例子。点击地图以绘制半径并选择半径，它将显示所有 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>

- Matej P.

@ChingChongPa 在 Firefox 中它对我有效。这取决于浏览器的设置等，因为它从 https 页面加载 http 脚本。在本地主机上尝试一下，应该可以在任何浏览器中工作。如果您遇到“无 API 密钥”错误，可以尝试按照此处描述的方式加载 Google Maps JS api：https://developers.google.com/maps/documentation/javascript/tutorial，而不是从示例中使用 google.load("maps".. 的方式。 - Matej P.

这个例子是否最新？ - Lukas

2

加载几何库，并使用computeDistanceBetween()函数来计算每个标记与中心点之间的距离。

如果距离在半径范围内，则显示该标记。

- Andrew Leach

1

请参考此问题的答案：Google Maps Api v3 - find nearest markers

您基本上需要循环遍历标记数组，并使用公式计算它们与给定点（表示搜索半径圆的中心）之间的距离。

然后，您可以排除任何距离大于半径的标记，剩下的标记将在圆内。

- beeglebug

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Boris Strandjev · Accepted Answer

只需遍历您拥有的所有标记，并使用以下函数从特定坐标到标记获取距离：computeDistanceBetween()：

要计算此距离，请调用computeDistanceBetween()，将两个LatLng对象传递给它。

我在这里找到了它。然后只需过滤掉所有距离太近的标记。