web-dev-qa-db-fra.com

Tracer un rayon autour d'un point dans Google Map

J'utilise l'API Google Maps et j'ai ajouté des marqueurs. Maintenant, je souhaite ajouter un rayon de 10 milles autour de chaque marqueur, ce qui signifie un cercle qui se comporte de manière appropriée lors du zoom. Je ne sais pas comment faire cela et il semble que ce ne soit pas quelque chose de commun.

J'ai trouvé un exemple qui semble bon , et vous pouvez également consulter Google Latitude. Là, ils utilisent des marqueurs avec un rayon, tout comme je les veux.

Mise à jour: Google Latitude utilise ne image qui est redimensionnée, comment cela fonctionnerait-il?

javascriptgoogle-maps
91
webjunkie

À l'aide de l'API Google Maps V3, créez un objet Circle, puis utilisez bindTo () pour le lier à la position de votre marqueur (car il s'agit tous deux d'instances google.maps.MVCObject).

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

Vous pouvez le faire ressembler au cercle Google Latitude en modifiant les options fillColor, strokeColor, strokeWeight, etc. ( API complète ).

Voir plus code source et exemples de captures d'écran .

226
Dunc

Il semble que la méthode la plus courante pour y parvenir consiste à tracer un GPolygon avec suffisamment de points pour simuler un cercle. L'exemple que vous avez cité utilise cette méthode. Cette page a un bon exemple - cherchez la fonction drawCircle dans le code source.

10
Chris B

Dans la géométrie sphérique, les formes sont définies par des points, des lignes et des angles entre ces lignes. Vous n'avez que ces valeurs rudimentaires pour travailler.

Par conséquent, un cercle (en termes de forme projetée sur une sphère) est quelque chose qui doit être approché à l'aide de points. Plus il y a de points, plus cela ressemble à un cercle.

Cela dit, sachez que Google Maps est projetant la Terre sur une surface plane (pensez à "dérouler" la Terre et à l'étirer + l'aplatir jusqu'à ce qu'elle ait l'air "carrée"). Et si vous avez un système de coordonnées plat, vous pouvez dessiner tout ce que vous voulez sur des objets 2D.

En d'autres termes, vous pouvez dessiner un cercle vectoriel mis à l'échelle sur une carte google. Le problème, c’est que Google Maps ne vous le donne pas immédiatement (ils veulent rester aussi proches que possible des valeurs SIG). Ils ne vous donnent que GPolygon, ce qu'ils veulent que vous utilisiez pour approximer un cercle. Cependant, ce gars l’a fait en utilisant vml pour IE et svg pour d’autres navigateurs (voir la section "CERCLES SCALED").

Revenons maintenant à votre question sur Google Latitude en utilisant une image circulaire à l'échelle (et c'est probablement celle qui vous est la plus utile): si vous savez que le rayon de votre cercle ne changera jamais (par exemple, il fait toujours 10 miles autour d'un point), puis la solution la plus simple serait d'utiliser un GGroundOverlay , qui est simplement une URL d'image et le GLatLngBounds que l'image représente. Le seul travail que vous devez faire est alors de calculer GLatLngBounds représentant votre rayon de 10 milles. Une fois que vous avez cela, l'API de Google Maps gère la mise à l'échelle de votre image lorsque l'utilisateur effectue un zoom avant ou arrière.

9
Crescent Fresh

J'ai eu ce problème dans le passé, alors j'ai mis en favori ceci discussion.

Pour résumer, vous pouvez:

  1. Regardez le code source de ce filtre circulaire et voyez comment l’incorporer à votre projet.
  2. Dessinez un GPolygon avec suffisamment de points pour simuler un cercle.
  3. Générez un fichier KML en modifiant http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 , puis en l'important. Dans Google Maps, il vous suffit de coller l’URI dans le champ de recherche pour l’afficher sur la carte. Je ne sais pas comment vous pourriez le faire en utilisant l'API cependant.
4
Sean

Pour une solution API v3, reportez-vous à:

http://blog.enbake.com/draw-circle-with-google-maps-api-v

Il crée un cercle autour de points, puis affiche des marqueurs dans et hors de la plage avec des couleurs différentes. Ils calculent également le rayon dynamique, mais dans votre cas, le rayon est fixe, donc peut-être moins de travail.

2
Arpan Aggarwal

Je viens d'écrire un article de blog sur ce sujet, qui pourrait vous être utile: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Fondamentalement, vous devez créer un GGroundOverlay avec les GLatLngBounds corrects. La partie la plus délicate consiste à déterminer la coordonnée du coin sud-ouest et la coordonnée du coin nord-est de ce carré de l’imaginaire (les GLatLngBounds) entourant ce cercle, en fonction du rayon souhaité. Le calcul est assez compliqué, mais vous pouvez simplement vous référer à la fonction getDestLatLng dans le blog. Le reste devrait être assez simple.

1
user98463