Dessiner un rayon autour d'un point dans Google map

Question

J'utilise l'API Google Maps et j'ai ajouté des marqueurs. Je souhaite maintenant ajouter un rayon de 10 miles autour de chaque marqueur, c'est-à-dire un cercle qui se comporte de manière appropriée lors du zoom. Je n'ai aucune idée de la façon de procéder et il semble que ce ne soit pas quelque chose de courant.

J'ai trouvé un exemple qui semble bon Vous pouvez également jeter un coup d'œil à Google Latitude. Là-bas, ils utilisent des marqueurs avec un rayon, exactement comme je le souhaite.

Mise à jour : Google Latitude utilise une image qui est mis à l'échelle, comment cela fonctionnerait-il ? _{^{(fonction dépréciée)}}

Answer 1

À l'aide de l'API Google Maps V3, créez un objet Cercle, puis utilisez bindTo() pour le lier à la position de votre marqueur (puisqu'il s'agit de deux 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 de latitude de Google en modifiant les paramètres fillColor, strokeColor, strokeWeight, etc ( API complète ).

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

Answer 2

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

Answer 3

En géométrie sphérique, les formes sont définies par des points, des lignes et des angles entre ces lignes. Vous ne disposez que de 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 ressemblera à un cercle.

Cela dit, sachez que google maps est la projection de 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 y dessiner des objets en 2D autant que vous voulez.

En d'autres termes, vous peut dessiner un cercle vectoriel à l'échelle sur une carte google. L'ennui, c'est que Google Maps ne vous le donne pas d'emblée (il veut rester aussi proche des valeurs SIG que possible). Ils vous donnent seulement GPolygon qu'ils veulent que vous utilisiez pour approximer un cercle. Cependant, ce gars l'a fait en utilisant vml pour IE et svg pour les autres navigateurs (voir la section "CIRCULES SCALÉES").

Pour en revenir à votre question sur l'utilisation par Google Latitude d'une image de cercle mise à l'échelle (et c'est probablement ce qui vous sera le plus utile) : si vous savez que le rayon de votre cercle ne changera jamais (par exemple, il sera toujours de 10 miles autour d'un point), la solution la plus simple serait d'utiliser une image de cercle de type GGroundOverlay qui est juste l'url de l'image + les GLatLngBounds que l'image représente. Le seul travail que vous devez faire alors est de cacluer le fichier GLatLngBounds représentant votre rayon de 10 miles. 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.

Answer 4

J'ai eu ce problème dans le passé, alors j'ai mis ce site dans mes favoris. discussion.

Pour le résumer, vous pouvez :

1. Jetez un coup d'œil à ceci filtre circulaire et trouvez comment l'intégrer dans votre projet.
2. Dessinez un GPolygone avec suffisamment de points pour simuler un cercle.
3. Générer un fichier KML en modifiant http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 puis de l'importer. 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.

Answer 5

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 et affiche les marqueurs à l'intérieur et à l'extérieur de la plage avec des couleurs différentes. Il calcule également un rayon dynamique, mais dans votre cas, le rayon est fixe, ce qui représente moins de travail.