Ajouter une adresse civique à chaque élément dans un tableau de coordonnées GPS

**saljendi** · 04/05/2017, 15h14

J'ai un tableau javascript de coordonnées GPS. Je souhaite ajouter à chaque ligne (point GPS) l'adresse civique à l'aide de l'API Google Maps de géocodage inverse. Il semble que, en raison de la nature asynchrone des APIs Google Maps, je reçois les adresses, mais elles sont affectées aux mauvaises coordonnées. En d'autres termes, le script s'exécute après la fin de la boucle, puis attribue les valeurs à la matrice dans le mauvais ordre. J'ai essayé la solution dans Google Maps API Geocode Synchronously, mais l'exécution se bloque dans la boucle et à la fin s'arrete avec un message (google chrome out of memory ...).

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
var done = false;
while(!done){ // wait until request is processed
   geocoder.geocode({'location': latlng}, function(results, status) {
      done=true;
      if (status == google.maps.GeocoderStatus.OK) {
         console.log(results[0].formatted_address);
         civicAddress=results[0].formatted_address;
         NodesArray.push([lightId, lightLat, lightLng, civicAddress]);
      } else {
         window.alert('No results found');
      }
   });
}

Merci pour l'aide..

**NoSmoking** · 07/05/2017, 11h32

Bonjour,

mais l'exécution se bloque dans la boucle et à la fin s'arrete...

cela me parait normal attendu que tu relances une requête tant que la requête initiale n'est pas de retour.

Il y a plusieurs solutions envisageables, la rafale ou envoyer la requête suivante lorsque que la précédente est de retour.

Dans les 2 cas il te faut gérer les retours ZERO_RESULTS et OVER_QUERY_LIMIT en plus des status OK pour ne pas bloquer le processus.

La solution a mettre en oeuvre est plus simple qu'il n'y paraît et consiste à passer un Array à la fonction, à chaque retour tu supprimes de l'Array l'élément traité et tu relances la fonction, lorsqu'il n'y a plus d'élément dans l'Array la fonction prend fin.

Pour comprendre le principe voici un fichier exemple :

Code html :

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Google Maps API] Géocodage inversé multiple</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  margin-bottom: .5em;
  color: #069;
}
#main {
  margin: 0 auto;
  max-width: 60em;
  border-top: 1px solid transparent;
}
#div_carte {
  height: 23em;
  margin: auto 2em;
  max-width: 32em;
  border: 5px solid #FFF;
  box-shadow: 0 2px 4px 2px #CCC;
}
#console {
  margin: auto 2em;
  color: #888;
}
#div_result {
  font-size: 0.8em;
}
#div_result b {
  display: inline-block;
  min-width: 8em;
  color: #069;
}
#div_result b:after {
  content: ":\00A0";
  float: right;
  font-weight: normal;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?language=fr"></script>
<script>
var tData = [
  { 'lat' :44.837368, 'lng' :-0.576144, 'ville' :'Bordeaux'},
  { 'lat' :48.400000, 'lng' :-4.483333, 'ville' :'Brest'},
  { 'lat' : 0.400000, 'lng' : 0.483333, 'ville' :'????'},
  { 'lat' :45.194276, 'lng' : 5.731633, 'ville' :'Grenoble'},
  { 'lat' :50.62925,  'lng' : 3.057256, 'ville' :'Lille'},
  { 'lat' :45.767299, 'lng' : 4.834329, 'ville' :'Lyon'},
  { 'lat' :43.297612, 'lng' : 5.381042, 'ville' :'Marseille'},
  { 'lat' :48.856667, 'lng' : 2.350987, 'ville' :'Paris'},
  { 'lat' :48.573405, 'lng' : 7.752111, 'ville' :'Strasbourg'}
];
var tResult = [];
var oGeocoder;
var oMap;
function _console(txt) {
  document.getElementById('console').textContent = txt;
}
function initCarte() {
  // affiche avancement
  _console('Initialisation carte ...');
 
  oGeocoder = new google.maps.Geocoder();
  oMap = new google.maps.Map(document.getElementById('div_carte'), {
    'backgroundColor': '#FFF',
    'mapTypeControl': false,
    'streetViewControl': false,
    'zoom': 5,
    'center': {
      'lat': 46.8,
      'lng': 1.7
    },
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  });
  // attend que la carte soit loadée
  google.maps.event.addListenerOnce( oMap, 'tilesloaded', function(){
    // NOTA : on passe une copie du tableau de données en paramètre
    getAllAdresse(tData.slice());
  });
}
function showResult(data) {
  var html = [];
  var ind;
  var nb = data.length;
  for (ind = 0; ind < nb; ind += 1) {
    html.push('<b>' + data[ind].ville + '</b>' + data[ind].adresse);
  }
  document.getElementById('div_result').innerHTML = '<ul><li>' + html.join('</li><li>') + '</li></ul>';
}
function createMarker(data) {
  // création du marker
  var oMarker = new google.maps.Marker({
    'position': {
      'lat': data.lat,
      'lng': data.lng
    },
    'map': oMap,
    'icon': 'http://cdn.leafletjs.com/leaflet/v0.7.7/images/marker-icon.png',
    'title': data.adresse
  });
}
function getAllAdresse(dataLatLng) {
  // affiche avancement
  _console('');
  // si il y a encore des données à traiter
  if (dataLatLng.length) {
    var data = dataLatLng[0];
    var latlng = {
      'lat': data.lat,
      'lng': data.lng
    };
    // affiche avancement
    _console('Recherche : ' + data.ville + ' en cours...');    
    // lance recherche
    oGeocoder.geocode({
      'latLng': latlng
    }, function (results, status) {
      // action suivant tResult
      if (status === google.maps.GeocoderStatus.OK || status === google.maps.GeocoderStatus.ZERO_RESULTS) {
        var adr = results[0] ? results[0].formatted_address : 'Adresse introuvable !';
        var obj = {
          'lat': data.lat,
          'lng': data.lng,
          'ville': data.ville,
          'adresse': adr
        };
        // sauve les données
        tResult.push(obj);
        // création du marker
        createMarker(obj);
        // supprime l'élément traité
        dataLatLng.shift();
        //relance recherche
        getAllAdresse(dataLatLng);
      }
      else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
        console.log('Google Maps API warning: vous avez dépassé votre quota de requêtes https://developers.google.com/maps/documentation/geocoding/usage-limits.');
        // renvoie la demande
        _console('Recherche : ' + data.ville + ' OVER_QUERY_LIMIT en cours...');    
        setTimeout( function(){
          getAllAdresse(dataLatLng);
        }, 1000);
      }
      else {
        console.log('Geocode a échoué pour la raison suivante: ' + status);
      }
    });
  }
  else {
    showResult(tResult);
  }
}
// appel fonction au chargement de la page
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="main">
  <h1>Géocodage inversé multiple</h1>
  <div id="div_carte"></div>
  <pre id="console"></pre>    
  <div id="div_result"></div>
</div>
</body>
</html>

Si tu as beaucoup de données à traiter, il te faudra faire avec le problème lié au quota.

https://developers.google.com/maps/d...g/usage-limits

**saljendi** · 15/05/2017, 16h54

Bonjour,

Merci infiniment pour cette reponse. Je dois l'adopter a mon problem, mais je pense qu'il n'y aurait pas de souci..

Ajouter une adresse civique à chaque élément dans un tableau de coordonnées GPS [Google Maps]

APIs Google

Discussions similaires

Partager

Partager