récupérer la latitude et la longitude d'un clic

**akene** · 29/06/2009, 18h55

Bonjour à tous,

Je commence à regarder l'API pour un site éducatif et associatif et je n'y connais rien en javascript. Je souhaiterais pouvoir récupérer la latitude et la longitude lors d'un clic de la souris.

Je suis parti de cet exemple donné sur le site de doc :

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
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script
        type="text/javascript"
        src="http://api.ign.fr/geoportail/api?v=VERSION&amp;key=VOTRE_LICENCE&amp;instance=maCarte&amp;">
    <!--
      -->
    </script>
    <script type="text/javascript">
    <!--
        ClickControl= OpenLayers.Class( OpenLayers.Control, {
            /**
             * Constructor ClickControl
             */
            initialize: function(options) {
                OpenLayers.Control.prototype.initialize.apply(this,arguments);
                this.handlerOptions= {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                };
                this.handler= new OpenLayers.Handler.Click(
                    this, {'click': this.trigger}, this.handlerOptions);
            },

            /**
             * APIMethod: trigger
             */
            trigger: function(e) {
                var lonlat= this.map.getLonLatFromViewPortPx(e.xy).transform(
                    this.map.getProjection(), OpenLayers.Projection.CRS84
                );
                alert("Vous avez cliqué près de " + lonlat.lon + "N, " + lonlat.lat + " E");
            }
        });

        function initGeoportalMap() {
            //Cette fonction sera exécutée au chargement de la page HTML
            //La carte doit y être créée et paramétrée
            geoportalLoadmaCarte("plancheCartographique", "normal" );
            maCarte.addGeoportalLayers(maCarte.allowedGeoportalLayers);
            // création et insertion du nouveau contrôleur
            var monClic= new ClickControl();
            viewer.getMap().addControl(monClic);
            monClic.activate();
        }
      -->
    </script>
  </head>
  <body>
    <div id="plancheCartographique" style="width:800px;height:600px;"></div>
  </body>
</html>

Mais si la carte s'affiche bien, rien ne se passe lorsque je clique. il n'y a pas de lancement de la fonction mais je ne vois pas comment faire...

Sinon, existe-il un macarte.getLong et macartegetLat ou quelque chose de ce genre ?
Merci par avance de votre aide

**dgrichard** · 29/06/2009, 20h36

Le code en ligne comportait une erreur (relevée par un utilisateur par courriel), voici le nouveau (tel qu'il sera mis en ligne bientôt) :

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
        OpenLayers.Control.Click= OpenLayers.Class( OpenLayers.Control, {
            defaultHandlerOptions:{
                'single': true,
                'double': false,
                'pixelTolerance': 0,
                'stopSingle': false,
                'stopDouble': false
            },
           /**
             * Constructor
             */
            initialize: function(options) {
                OpenLayers.Control.prototype.initialize.apply(this,arguments);
                this.handlerOptions= OpenLayers.Util.extend({},this.defaultHandlerOptions);
                this.handler= new OpenLayers.Handler.Click(
                    this, {'click': this.trigger}, this.handlerOptions);
            },

            /**
             * APIMethod: trigger
             */
            trigger: function(e) {
                var lonlat= this.map.getLonLatFromViewPortPx(e.xy).transform(
                    this.map.getProjection(), OpenLayers.Projection.CRS84
                );
                alert("Vous avez cliqué près de " + lonlat.lon + "N, " + lonlat.lat + " E");
            }
        });

        function initGeoportalMap() {
            //Cette fonction sera exécutée au chargement de la page HTML
            //La carte doit y être créée et paramétrée
            geoportalLoadmaCarte("plancheCartographique", "normal" );
            maCarte.addGeoportalLayers(maCarte.allowedGeoportalLayers);
            // création et insertion du nouveau contrôleur
            var monClic= new OpenLayers.Control.Click();
            viewer.getMap().addControl(monClic);
            monClic.activate();
        }

Apparamment le nom choisi (ClickControl) provoquait une erreur dans la définition de la classe (héritage?).

**akene** · 30/06/2009, 10h41

Merci pour votre réponse, cela fonctionne bien.
Atention tout de même : il traine un viewer. à la fin du code

Code :

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

viewer.getMap().addControl(monClic);

ce qu'il faut remplacer par maCarte

Merci pour votre aide

**dgrichard** · 30/06/2009, 13h52

Effectivement, il trainait un viewer ! C'est corrigé.
De plus, pour être certain que le code va fonctionner (cela dépend des navigateurs ... IE en particulier), il vaut mieux insérer le code de la classe OpenLayers.Control.Click à l'intérieur de la méthode initGeoportalMap().

**jvo8513** · 10/09/2009, 18h15

salut

j'utilise ce code et le pop-up apparait bien. Par contre, si je clique a nouveau, il n'apparait pas.

Il faut que le clique en dehors de la carte, puis clique a nouveau sur la carte pour qu'il aparaisse.

Il y a un moyen pour eviter ca?

Merci

**dgrichard** · 11/09/2009, 11h02

Envoyé par jvo8513

j'utilise ce code et le pop-up apparait bien. Par contre, si je clique a nouveau, il n'apparait pas.

Il faut que le clique en dehors de la carte, puis clique a nouveau sur la carte pour qu'il aparaisse.

Pourrais-tu attacher le squelette de ta page pour voir l'ordre des opérations ?