Affectation de coordonnées à un point

**tdsi60** · 15/01/2010, 14h31

Bonjour à tous !

Dans le cadre de la création d'un site je me suis lancé à la découverte de javascript et de l'insertion d'une carte Google maps.
J'ai trouvé un script sur le web me permettant d'afficher une carte et d'encercler une zone (avec un cercle bleu) à partir d'un point que l'utilisateur aura double cliqué.
Lors du double clic le programme lance la fonction qui dessine ce cercle bleu.

En fait je voudrais que le cercle se dessine mais sans utiliser le principe du double clic, c'est à dire simplement en affectation des coordonnées à mon point.
Après de multiples recherches pendant plusieurs jours je ne trouve pas de réponse à mon problème.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Ce code parait très long mais il est en fait beaucoup commenté.
La variable que j'aimerais modifier est la variable 'point' à laquelle je voudrais affecter 2 coordonnées.

Merci par avance pour votre aide.