查找给定半径内的所有标记

时间:2012-04-24 09:40:49

标签: javascript algorithm google-maps

输入:给定一个特定的坐标(纬度和经度)和半径 输出:从给定的标记列表中显示位于该圆下的所有标记。

如何在谷歌地图中执行此操作?

5 个答案:

答案 0 :(得分:20)

只需迭代您拥有的所有标记,并使用以下函数来获取从特定坐标到标记的距离:computeDistanceBetween()

  

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

我在here上找到了它。然后只过滤掉所有足够接近的标记。

答案 1 :(得分:6)

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

答案 2 :(得分:4)

这是一个工作示例。单击贴图以绘制具有所选半径的半径,它将显示落在半径内的all_locations示例阵列中的所有标记。单击标记可查看距离半径中心的距离(以米为单位)。 (点击纽约第二街周围的某处查看示例标记 - 地图已经居中到该位置)

&#13;
&#13;
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]);
  	}
  }
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

加载geometry library并使用computeDistanceBetween()查找每个标记距中心点的距离。

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

答案 4 :(得分:0)

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

您基本上需要遍历您的标记数组,并使用公式计算它们与给定点的距离(代表搜索半径的圆心)。

然后,您可以排除任何远离半径的标记,广告将留下圆圈内的标记列表。

相关问题