Api Google Maps flèche Polygone flèche Dessiner un cercle - Tracer un rond - Créer un disque.

COMMENT DESSINER UN CERCLE SUR LA CARTE

Article créé le : 29/01/2009
 

Présentation

Dans cet exemple, nous allons dessiner un disque sur la carte, centré sur le point sur lequel vous avez "double-cliqué".

  • le précédent disque, s'il existe, est effacé,
  • la carte se centre sur le point double-cliqué,
  • un nouveau disque s'affiche centré sur ce point,
  • le centre du cercle est symbolisé par un marqueur.

Les caractéristiques de ce disque sont :

  • Couleur du cercle autour du disque : #0000ff (bleu)
  • Epaisseur du trait du cercle autour du disque : 1 pixel
  • Opacité du cercle autour du disque : .5 (valeur de 0 à 1)
  • Couleur du disque : #0000ff (bleu)
  • Opacité du disque : .1 (valeur de 0 à 1)
  • Rayon : 30 kilomètres
  • Le cercle est un polygone comportant : 60 segments

Résultat

Code

Code : Avec Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <title>Touraineverte.com - dessiner tracer un disque</title>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* Déclaration des variables globales */
  • var maCarte;
  • var polygoneCercle;
  • var centre;
  • var monMarqueur;
  •  
  • var cercleCouleur = "#0000ff";
  • var cercleEpaisseur = "1";
  • var cercleOpacite = ".5";
  • var disqueCouleur = "#0000ff";
  • var disqueOpacite = ".1";
  • var rayon = 30;
  • var segment = 60;
  •  
  • /* Fonction initialize() */
  • function initialize() {
  • /* ... Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... Désactivation du double click permettant de zoomer sur la carte ... */
  • maCarte.disableDoubleClickZoom();
  • /* ... Ajout à la carte nommée "maCarte" du mini contrôle permettant de zoomer et de déplacer la carte ... */
  • maCarte.addControl(new google.maps.SmallMapControl());
  • /* ... Ajout à la carte nommée "maCarte" de l'Echelle ... */
  • maCarte.addControl(new google.maps.ScaleControl());
  • /* ... Centre la carte nommée "maCarte" sur la Latitude 47.389982, la Longitude 0.688705, avec un niveau de zoom égal à 9 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.389982,0.688705), 9);
  • /* ... Ajout d'un observateur d'événement à la carte nommée "maCarte" ... */
  • /* ... L'événement observé est le double-click sur la carte nommée "maCarte" ... */
  • google.maps.Event.addListener(maCarte, "dblclick", function(marker, point) {
  • /* ... Suppression de tous les recouvrements (le cercle précédemment tracé dans notre cas) de la carte nommée "maCarte" .... */
  • maCarte.clearOverlays();
  • /* ... Centre la carte nommée "maCarte" sur le point double-cliqué avec un niveau de zoom actuel de la carte nommée "maCarte" ... */
  • maCarte.setCenter(point, maCarte.getZoom());
  • /* ... Création d'un marqueur nommé "monMarqueur" ancré sur le point surlequel on a double cliqué sur la carte ... */
  • monMarqueur = new google.maps.Marker(point);
  • /* ... Ajout du marqueur nommé "monMarqueur" sur la carte nommée "maCarte" ... */
  • maCarte.addOverlay(monMarqueur);
  • /* ... centre = point ayant pour coordonnées le centre actuel de la carte nommée "maCarte" ... */
  • centre = maCarte.getCenter();
  • /* ... Appel de la fonction dessineUnCercle() afin de tracer le cercle... */
  • dessineUnCercle();
  • });
  • /* ... Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Fonction dessineUnCercle() */
  • function dessineUnCercle(){
  • var latConv = centre.distanceFrom(new google.maps.LatLng(centre.lat()+0.1, centre.lng()))/100;
  • var lngConv = centre.distanceFrom(new google.maps.LatLng(centre.lat(), centre.lng()+0.1))/100;
  • /* ... Création d'un tableau nommé "pointsCercle". Celui-ci va contenir tous les points nécessaires ... */
  • /* ... à la construction du polygone représentant le cercle nommé "polygoneCercle" ... */
  • var pointsCercle = [];
  • var step = parseInt(360/segment)||10;
  • for(var i=0; i<=360; i+=step){
  • /* ... "pint" : coordonnées d'un point participant à la construction du polygone nommé "polygoneCercle" ... */
  • var pint = new google.maps.LatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180)));
  • /* ... Ajout du point "pint" dans le tableau "pointsCercle" ... */
  • pointsCercle.push(pint);
  • }
  • /* ... Création d'un polygone nommé "polygoneCercle" ... */
  • polygoneCercle = new google.maps.Polygon(pointsCercle, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);
  • /* ... on ajoute le polygone nommé "polygoneCercle" à la carte nommée "maCarte". */
  • /* ... ce polygone représente le cercle tracé sur la carte. ... */
  • maCarte.addOverlay(polygoneCercle);
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • </script>
  • </head>
  • <body>
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
  • <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>

Code : Sans Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <title>Touraineverte.com - dessiner tracer un disque</title>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
  • <script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • /* Déclaration des variables globales */
  • var maCarte;
  • var polygoneCercle;
  • var centre;
  • var monMarqueur;
  •  
  • var cercleCouleur = "#0000ff";
  • var cercleEpaisseur = "1";
  • var cercleOpacite = ".5";
  • var disqueCouleur = "#0000ff";
  • var disqueOpacite = ".1";
  • var rayon = 30;
  • var segment = 60;
  •  
  • /* Fonction initialize() */
  • function initialize() {
  • /* ... Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... Désactivation du double click permettant de zoomer sur la carte ... */
  • maCarte.disableDoubleClickZoom();
  • /* ... Ajout à la carte nommée "maCarte" du mini contrôle permettant de zoomer et de déplacer la carte ... */
  • maCarte.addControl(new GSmallMapControl());
  • /* ... Ajout à la carte nommée "maCarte" de l'Echelle ... */
  • maCarte.addControl(new GScaleControl());
  • /* ... Centre la carte nommée "maCarte" sur la Latitude 47.389982, la Longitude 0.688705, avec un niveau de zoom égal à 9 ... */
  • maCarte.setCenter(new GLatLng(47.389982,0.688705), 9);
  • /* ... Ajout d'un observateur d'événement à la carte nommée "maCarte" ... */
  • /* ... L'événement observé est le double-click sur la carte nommée "maCarte" ... */
  • GEvent.addListener(maCarte, "dblclick", function(marker, point) {
  • /* ... Suppression de tous les recouvrements (le cercle précédemment tracé dans notre cas) de la carte nommée "maCarte" .... */
  • maCarte.clearOverlays();
  • /* ... Centre la carte nommée "maCarte" sur le point double-cliqué avec un niveau de zoom actuel de la carte nommée "maCarte" ... */
  • maCarte.setCenter(point, maCarte.getZoom());
  • /* ... Création d'un marqueur nommé "monMarqueur" ancré sur le point surlequel on a double cliqué sur la carte ... */
  • monMarqueur = new GMarker(point);
  • /* ... Ajout du marqueur nommé "monMarqueur" sur la carte nommée "maCarte" ... */
  • maCarte.addOverlay(monMarqueur);
  • /* ... centre = point ayant pour coordonnées le centre actuel de la carte nommée "maCarte" ... */
  • centre = maCarte.getCenter();
  • /* ... Appel de la fonction dessineUnCercle() afin de tracer le cercle... */
  • dessineUnCercle();
  • });
  • /* ... Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Fonction dessineUnCercle() */
  • function dessineUnCercle(){
  • var latConv = centre.distanceFrom(new GLatLng(centre.lat()+0.1, centre.lng()))/100;
  • var lngConv = centre.distanceFrom(new GLatLng(centre.lat(), centre.lng()+0.1))/100;
  • /* ... Création d'un tableau nommé "pointsCercle". Celui-ci va contenir tous les points nécessaires ... */
  • /* ... à la construction du polygone représentant le cercle nommé "polygoneCercle" ... */
  • var pointsCercle = [];
  • var step = parseInt(360/segment)||10;
  • for(var i=0; i<=360; i+=step){
  • /* ... "pint" : coordonnées d'un point participant à la construction du polygone nommé "polygoneCercle" ... */
  • var pint = new GLatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180)));
  • /* ... Ajout du point "pint" dans le tableau "pointsCercle" ... */
  • pointsCercle.push(pint);
  • }
  • /* ... Création d'un polygone nommé "polygoneCercle" ... */
  • polygoneCercle = new GPolygon(pointsCercle, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);
  • /* ... on ajoute le polygone nommé "polygoneCercle" à la carte nommée "maCarte". */
  • /* ... ce polygone représente le cercle tracé sur la carte. ... */
  • maCarte.addOverlay(polygoneCercle);
  • }
  • </script>
  • </head>
  • <!-- Une fois la page chargée la fonction initialize() est exécutée. -->
  • <!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
  • <body onload="initialize()" onunload="GUnload()">
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
  • <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>

Remarque(s)

Pour modifier les caractéristiques du disque, il vous suffit de modifier les paramètres suivants :

  • Repère N° 1 Repère N° 1 var cercleCouleur : Couleur du cercle autour du disque : #0000ff (bleu)
  • Repère N° 2 Repère N° 2 var cercleEpaisseur : Épaisseur du trait du cercle autour du disque : 1 (en pixel)
  • Repère N° 3 Repère N° 3 var cercleOpacite : Opacité du cercle autour du disque : .5 ( valeur de 0 à 1 )
  • Repère N° 4 Repère N° 4 var disqueCouleur : Couleur du disque : #0000ff (bleu)
  • Repère N° 5 Repère N° 5 var disqueOpacite : Opacité du disque : .1 ( valeur de 0 à 1 )
  • Repère N° 6 Repère N° 6 var rayon : Rayon en kilomètres : 30
  • Repère N° 7 Repère N° 7 var segment : Nombre de segments constituant le cercle : 60