1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<?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(49.1781,2.28611), 11);
/* ... 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" ... */
/* ... 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);
}
dessineUnCercle();
</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 740 pixels de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 740px; 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> |
