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 milles autour de chaque marqueur, ce qui signifie un cercle qui se comporte de manière appropriée lors du zoom. Je n'ai aucune idée de comment faire cela et il semble que ce n'est pas quelque chose de commun.
J'ai trouvé un exemple qui semble bon, et vous pouvez jeter un oeil à Google Latitude, aussi. Là, ils utilisent des marqueurs avec un rayon, tout comme je les veux.
Mise à Jour: Google Latitude utilise une image, ce qui est mise à l'échelle, comment cela fonctionnerait-il?
6 réponses
À L'aide de L'API Google Maps v3, créez un objet Circle, puis utilisez bindTo() pour l'attacher à la position de votre marqueur (car ils sont tous les deux google.cartographie.Mvcobject instances).
// 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 changeant fillColor, strokeColor, strokeWeight etc. (API complète ).
Voir plus code source et exemples de captures d'écran .
, Il semble que la méthode la plus courante pour ce faire est de dessiner un GPolygon 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.
En 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 à utiliser.
Par conséquent, un cercle (en termes de forme a projetée sur une sphère) est quelque chose qui doit être approximé en utilisant des points. Plus il y a de points, plus ça va ressembler à un cercle.
Cela dit, réalisez que google maps projette la Terre sur une surface plane (pensez à "dérouler" la terre et à l'étirer + à l'aplatir jusqu'à ce qu'il paraît "carré"). Et si vous avez un système de coordonnées plat, vous pouvez dessiner des objets 2D sur tout ce que vous voulez.
En d'autres termes, vous pouvez dessiner un cercle vectoriel mis à l'échelle sur une carte google. Le hic est que google maps ne vous le donne pas hors de la boîte (ils veulent rester aussi près des valeurs SIG que possible pragmatiquement). Ils ne vous donnent que 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 "cercles mis à L'échelle").
Maintenant, revenons à votre question sur Google Latitude en utilisant une image de cercle mise à l'échelle (et c'est probablement le 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 + les GLatLngBounds que l'image représente. Le seul travail que vous devez faire alors est cacluate le GLatLngBounds représentant votre rayon de 10 milles. 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é, donc j'ai mis en signet cette discussion .
Pour le résumer, vous pouvez:
- jetez un oeil à ce code source de circle filter et découvrez comment l'intégrer dans votre projet.
- dessinez un GPolygon avec suffisamment de points pour simuler un cercle.
- 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{[2] } puis l'importer. Dans Google Cartes, vous pouvez simplement coller L'URI dans la zone de recherche et il s'affichera sur la carte. Je ne suis pas sûr de savoir comment vous pourriez le faire en utilisant L'API.
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, donc peut-être moins de travail.
Je viens d'écrire un article de blog qui aborde exactement 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. Le bit délicat est de travailler sur la coordonnée du coin sud-ouest et la coordonnée du coin nord-est de ce carré imaginery (les GLatLngBounds) délimitant ce cercle, en fonction du rayon désiré. 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.