web-dev-qa-db-fra.com

Trouver tous les marqueurs dans un rayon donné

Entrée: donné une coordonnée spécifique (latitude et longitude) et un rayon Sortie: Afficher tous les marqueurs qui se trouvent sous ce cercle à partir de la liste donnée de marqueurs.

Comment puis-je faire cela dans google maps? 

javascriptalgorithmgoogle-maps
18
Suraj Chawda

Il suffit de parcourir tous les marqueurs que vous avez et d’utiliser la fonction suivante pour obtenir la distance entre les coordonnées spécifiques et le marqueur: computeDistanceBetween():

Pour calculer cette distance, appelez computeDistanceBetween () en la passant deux objets LatLng.

Je l'ai trouvé sur ici . Ensuite, il vous suffit de filtrer tous les marqueurs qui se révèlent être suffisamment proches.

19
Boris Strandjev
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);
}
5
shashankaholic

Voici un exemple de travail. Cliquez sur la carte pour dessiner un rayon avec le rayon sélectionné. Tous les marqueurs du tableau all_locations compris dans le rayon seront affichés. Cliquez sur un marqueur pour voir la distance en mètres du centre du rayon. (Cliquez quelque part autour de la deuxième rue de New York pour voir les exemples de marqueurs - la carte est déjà centrée sur cet endroit)

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>

3
Matej P.

Chargez la bibliothèque de géométrie et utilisez computeDistanceBetween() pour trouver la distance entre chaque marqueur et votre point central.

Si la distance est dans le rayon, affichez le marqueur.

1
Andrew Leach

Voir la réponse donnée à cette question: Google Maps Api v3 - recherche des marqueurs les plus proches

En gros, vous devez parcourir votre tableau de marqueurs et utiliser une formule pour calculer leur distance à partir d'un point donné (le centre du cercle représentant votre rayon de recherche).

Vous pouvez ensuite exclure tous les marqueurs plus éloignés que le rayon. Il vous restera alors une liste de marqueurs situés à l'intérieur du cercle.

0
beeglebug