Arrêter de mesurer la distance

**abel.ludba** · 15/01/2014, 18h47

Salut
J'ai un petit code qui aide à mesurer la distance directe entre deux points.
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
100
101
102
103
104
 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
      table { width: 100%; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
    <script type="text/javascript">
      function $(id) {
        return document.getElementById(id);
      }
 
      var map;
      var mapOptions = {
        center: new google.maps.LatLng(48.6936, 6.1846),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
		disableDoubleClickZoom: true
      };
 
      var markers = [];
      var line;
 
      function initialize() {
        map = new google.maps.Map($("map_canvas"), mapOptions);
        line = new google.maps.Polyline({
          map: map,
          strokeColor: "#FF3333",
          strokeOpacity: 0.5,
          strokeWeight: 8
        });
//
 
 
      google.maps.event.addListener(map, 'dblclick', function(event) {
            marker.setMap(null);
			alert(" Je vais arreter le processus");
            delMarkers();
          });
//		  
        google.maps.event.addListener(map, 'click', function(event) {
          var marker = new google.maps.Marker({
            map: map,
            position: event.latLng,
            icon:"vertix.png"
          });
          markers.push(marker);
          drawPath();
 
 
        });
      }
 
      function countMarkers() {
        count = 0;
        for (var i = markers.length - 1; i >= 0; i--) {
          if (markers[i].getMap() == null) {
            markers.splice(i, 1);
          } else {
            count++;
          }
        }
        return count;
      }
 
      function drawPath() {
        countMarkers();
        var coords = [];
        for (var i = 0; i < markers.length; i++) {
          coords.push(markers[i].getPosition());
        }
        line.setPath(coords);
 
        meters = google.maps.geometry.spherical.computeLength(coords);
        $("distKm").value = Math.round(meters/1000 * 100) / 100; 
      }
 
      function delMarkers() {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null)
        }
        drawPath();
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <table border="0">
      <tr>
        <td width="50%" valign="top" id="map_canvas">
        </td>
        <td width="50%" valign="top">
          <form id="form">
            <input id="distKm" type="text"> km 
 
            <input id="button1" type="button" value="Clear markers" onclick="delMarkers()">
          </form>
        </td>
      </tr>
    </table>
  </body>
</html>

Cela fonctionne bien.
Mais, je n'ai pas de moyen d'arrêter la meusre de distance, par exemple: avec un double clique.
Que serait la meilleures solution pour arreter et quitter cette fonction?
Merci
Abel

**NoSmoking** · 16/01/2014, 22h18

Bonjour,
le soucis que tu rencontres n'est pas lié à l'APi mais à la gestion des événements en général.
Qu'est un double clic? Simplement un clic suivi d'un autre clic et ce à condition que rien ne perturbe cette succession ce qui est le cas lorsqu'il y a exécution de code.

Dans ton cas tu n’atteins jamais le double clic attendu qu'une action est en cours remettant le compteur de clic à zéro.

Un solution est de différer l'exécution de la fonction prévue sur le clic et de la killer sur le double clic si celui ci intervient, pour cela tu peux passer par un setTimeout.

La première chose à faire est d'attribuer à ta map une propriété iTimer par exemple.

Code :

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

1
2
3
4
5
6
7
var mapOptions = {
    'center': new google.maps.LatLng(48.6936, 6.1846),
    'iTimer' : null,    // pour gestion setTimeout
    'zoom': 13,
    'mapTypeId': google.maps.MapTypeId.ROADMAP,
    'disableDoubleClickZoom': true
};

maintenant sur l'événement click de la map il faut différer la fonction à exécuter

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
google.maps.event.addListener(map, 'click', function (event) {
  (function (map_, param_) {
    map_.iTimer = setTimeout(function () {
      var marker = new google.maps.Marker({
        map: map_,
        position: param_.latLng,
        icon: "vertix.png"
      });
      markers.push(marker);
      drawPath();
    }, 250);
  })(this, event);
});

je ne te commente pas la syntaxe, un peu barbare, de la fonction qui te permets d'utiliser tes variables hors contexte, voir info sur les closures.
Sache simplement que la fonction de création et de traçage de la polyline et différé de 250ms, à ajuster surement.

Maintenant reste à gérer le double click lors duquel la première chose à faire sera de supprimer la fonction mise en attente avec le setTimeout

Code :

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

1
2
3
4
google.maps.event.addListener(map, 'dblclick', function (event) {
  clearTimeout(this.iTimer);               // on supprime l'encours
  alert(" Je vais arreter le processus");  // là tu mets ce que tu veux comme code
});

voilà en gros comment je procéderais.

**abel.ludba** · 20/01/2014, 00h04

Salut NoSmoking
Merci pour ta réponse.
J'ai essayé qlq ch de très simple, je remes le code au complet, comme suit:

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
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
      table { width: 100%; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
    <script type="text/javascript">
      function $(id) {
        return document.getElementById(id);
      }
 
      var map;
      var mapOptions = {
        center: new google.maps.LatLng(48.6936, 6.1846),
        zoom: 13,
		'iTimer' : null,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
		disableDoubleClickZoom: true
      };
 
      var markers = [];
      var line;
	  var doubleClique=false;
 
      function initialize() {
        map = new google.maps.Map($("map_canvas"), mapOptions);
        line = new google.maps.Polyline({
          map: map,
          strokeColor: "#FF3333",
          strokeOpacity: 0.5,
          strokeWeight: 8
        });
//
 
 
		google.maps.event.addListener(map, 'dblclick', function (event) {
		  clearTimeout(this.iTimer);               // on supprime l'encours
		  alert(" Je vais arreter le processus");  // là tu mets ce que tu veux comme code
		  delMarkers();
		  doubleClique=true; // Une var Bool pour tester
		});
//		  
        if(!doubleClique)
		{
		google.maps.event.addListener(map, 'click', function (event) {
		  (function (map_, param_) {
			map_.iTimer = setTimeout(function () {
			  var marker = new google.maps.Marker({
				map: map_,
				position: param_.latLng,
				icon: "vertix.png"
			  });
			  markers.push(marker);
			  drawPath();
			}, 250);
		  })(this, event);
		});
      }
      }
//
      function countMarkers() {
        count = 0;
        for (var i = markers.length - 1; i >= 0; i--) {
          if (markers[i].getMap() == null) {
            markers.splice(i, 1);
          } else {
            count++;
          }
        }
        return count;
      }
 
      function drawPath() {
        countMarkers();
        var coords = [];
        for (var i = 0; i < markers.length; i++) {
          coords.push(markers[i].getPosition());
        }
        line.setPath(coords);
 
        meters = google.maps.geometry.spherical.computeLength(coords);
        $("distKm").value = Math.round(meters/1000 * 100) / 100; 
      }
 
      function delMarkers() {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null)
        }
        drawPath();
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <table border="0">
      <tr>
        <td width="50%" valign="top" id="map_canvas">
        </td>
        <td width="50%" valign="top">
          <form id="form">
            <input id="distKm" type="text"> km 
 
            <input id="button1" type="button" value="Clear markers" onclick="delMarkers()">
          </form>
        </td>
      </tr>
    </table>
  </body>
</html>

Il y a sans doute qlq ch que je ne pige pas.
est ce que je suis sur le bon chemin?
Je pensais que ce serait possible de faire une chose similaire à ce qui est dans les outils de dessin où un double clique permet de quitter l'evenement
STP, voir ici:
https://developers.google.com/maps/d.../drawing-tools
Merci de ton aide.
Abel

**NoSmoking** · 20/01/2014, 18h16

Tout d'abord le test que tu as mis en place avec doubleClique ne te sert strictement à rien attendu que tu ne passes qu'une fois dans la fonction d'initialisation.

Concernant l'exemple que tu montres l'approche est différente, il ne s'agit pas d'un double clic mais d'un deuxième clic au même endroit.
Dans ce cas tu peux effectivement le gérer avec un compteur de clic incrémenté sur le click de la map et que tu remets à zéro sur le mousemove de la map.

Arrêter de mesurer la distance

APIs Google

Discussions similaires

Partager

Partager