Dessiner un rayon autour d'un point dans Google map

J'utilise l'API Google Maps et j'ai ajouté des marqueurs. Maintenant, je veux ajouter un rayon de 10 miles 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 a l'air bien , et vous pouvez également jeter un œil à Google Latitude. Là, ils utilisent des marqueurs avec un rayon, comme je les veux.

Mettre à jour: Google Latitude utilise une image mise à l'échelle, comment cela fonctionnerait-il? _{^{(fonctionnalité obsolète)}}

À 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 ce sont tous les deux des 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 fillColor, strokeColor, strokeWeight, etc. ( API complète ).

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

Il semble que la méthode la plus courante pour y parvenir soit de dessiner un GPolygone avec suffisamment de points pour simuler un cercle. L'exemple que vous avez référencé utilise cette méthode. Cette page a un bon exemple - recherchez la fonction drawCircle dans le code source.

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 avec lesquelles 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 ressemblera à un cercle.

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

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

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

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

Pour résumer, vous pouvez:

1. Jetez un œil au code source de ce filtre circulaire et découvrez comment l'intégrer à votre projet.
2. Dessinez un GPolygone 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, vous pouvez simplement coller l'URI dans le champ de recherche et il s'affichera sur la carte. Je ne sais pas comment vous pourriez le faire en utilisant l'API.

Je viens d'écrire un article de blog qui traite exactement de cela, que vous trouverez peut-ê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 difficulté consiste à déterminer la coordonnée du coin sud-ouest et la coordonnée du coin nord-est de ce carré imaginaire (GLatLngBounds) délimitant 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.

Pour une solution API v3, reportez-vous à:

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

Il crée un cercle autour des points, puis affiche des marqueurs à l'intérieur et à l'extérieur de la plage avec des couleurs différentes. Ils calculent également le rayon dynamique, mais dans votre cas, le rayon est fixe, ce qui peut nécessiter moins de travail.