web-dev-qa-db-fra.com

Rayon de la région "visible" dans Google Maps v3

J'ai besoin de savoir comment récupérer le rayon du niveau de zoom visible dans l'API google maps v3.

Par exemple, si je suis au niveau de zoom 3, et en fonction de la taille de l'écran de l'utilisateur (disons simplement une région visible 400x400), comment puis-je obtenir le cercle "rayon" de la zone visible.

Sinon, j'utilise actuellement map.fitBounds () pour tous les points que j'ai ajoutés à la carte, donc vraiment tout ce dont j'ai besoin BESOIN est le rayon de tous les bornes. Ce que je veux, c'est quelque chose comme "20 miles" que je peux ajouter à mon application de base de données.

38
Mech Software

Le rayon serait égal à la distance entre le centre des limites et l'un des coins de la limite. En utilisant la formule de distance du grand cercle de les calculs de cette page , j'ai trouvé ce qui suit:

var bounds = map.getBounds();

var center = bounds.getCenter();
var ne = bounds.getNorthEast();

// r = radius of the earth in statute miles
var r = 3963.0;  

// Convert lat or lng from decimal degrees into radians (divide by 57.2958)
var lat1 = center.lat() / 57.2958; 
var lon1 = center.lng() / 57.2958;
var lat2 = ne.lat() / 57.2958;
var lon2 = ne.lng() / 57.2958;

// distance = circle radius from center to Northeast corner of bounds
var dis = r * Math.acos(Math.sin(lat1) * Math.sin(lat2) + 
  Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));

Après avoir joué un peu plus avec cela, j'ai remarqué que map.getBounds() contiendra la fenêtre d'affichage de la carte complète. Mais si votre LatLngBounds est construit en s'étendant pour inclure LatLng points, et alors vous émettez une map.fitBounds(bounds), l'API augmente un peu la fenêtre d'affichage de la carte afin que la "boîte" bounds ait un peu de remplissage.

Si vous utilisez la fenêtre actuelle de la carte, le rayon entre le centre et l'angle de la fenêtre peut être plus long que vous le souhaitez. Peut-être la distance entre le centre de la fenêtre et le milieu de l'arête la plus éloignée de la fenêtre. (Si la carte n'est pas un carré parfait)

81
Eric C

Version refactorisée de réponse d'Eric ci-dessus en utilisant google.maps.geometry.spherical namespace (assurez-vous vous avez chargé bibliothèque de géométrie pour faire ce travail).

var bounds = map.getBounds();
var center = map.getCenter();
if (bounds && center) {
  var ne = bounds.getNorthEast();
  // Calculate radius (in meters).
  var radius = google.maps.geometry.spherical.computeDistanceBetween(center, ne);
}
26
Ruslan Kabalin

J'ai également remanié la réponse d'Eric, la mienne est en tant que fonction autonome, et je renvoie le résultat en mètres (selon les besoins de Recherche API Places .

function getBoundsRadius(bounds){
  // r = radius of the earth in km
  var r = 6378.8
  // degrees to radians (divide by 57.2958)
  var ne_lat = bounds.getNorthEast().lat() / 57.2958
  var ne_lng = bounds.getNorthEast().lng() / 57.2958
  var c_lat = bounds.getCenter().lat() / 57.2958
  var c_lng = bounds.getCenter().lng() / 57.2958
  // distance = circle radius from center to Northeast corner of bounds
  var r_km = r * Math.acos(
    Math.sin(c_lat) * Math.sin(ne_lat) + 
    Math.cos(c_lat) * Math.cos(ne_lat) * Math.cos(ne_lng - c_lng)
    )
  return r_km *1000 // radius in meters
}
4
Kyle Falconer

Je crois que Bounds ont les méthodes getNorthEast () et getSouthWest (), mais cela vous donnerait un rectangle (ce qui est vraiment les limites) et vous pourriez calculer la distance entre ces deux, etc. cercle hors de ce rectangle pourrait être un peu de travail ...

Peut-être que cela aidera: http://code.google.com/apis/maps/articles/mvcfun.html

et l'exemple: http://code.google.com/apis/maps/articles/mvcfun/step6.html

1
Dziad Borowy