Javascript Girl
  1. Javascript Girl
  3. Comment puis-je retourner une longitude et une latitude du géocodeur JavaScript Google Maps?
Intereting Posts
Erreur de Firefox lors du chargement du script 'chargement de Google Analytics dans FF2 AngularJS: passe un objet dans un état en utilisant ui-router Chargez les composants existants de manière dynamique. Angular 2 Release final Est-ce que JavaScript a un tas de mémoire? Div avec scroll et contenu avec des positions absolues Le nom de JavaScript ajouté en mode dynamique écrase la page de la page html (pas le code) La désactivation de LinkButton ne désactive pas l'événement de clic dans javascript Générer un GIF animé avec un canevas HTML5 Suppression de la broche de carte avec la recherche Comment utiliser JavaScript pour changer le formulaire action Passer des paramètres au script javascript dans xslt Pourquoi mon script alarmclock cesse de fonctionner? Effacer la fonction de sélection de JavaScript en surbrillance L'analyse par DOM provoque tous les enfants et les valeurs Créez un tableau et enfoncez-le en une seule ligne

Comment puis-je retourner une longitude et une latitude du géocodeur JavaScript Google Maps?

Quand j'utilise le code ci-dessous, j'annule une valeur vide? pourquoi donc?

HTML 

<body onload="initialize()"> <div id="map_canvas" style="width: 320px; height: 480px;"></div> <div> <input id="address" type="textbox" value="Sydney, NSW"> <input type="button" value="Encode" onclick="display()"> </div> </body>

JavaScript 

 var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; var loc=[]; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { loc[0]=results[0].geometry.location.lat(); loc[1]=results[0].geometry.location.lng(); } else { alert("Geocode was not successful for the following reason: " + status); } }); return loc; } function display(){ var long_lat=codeAddress(); alert(long_lat); }

Car votre codeAddress fonction est exécuté, en assignant un tableau vide à local, en exécutant une requête asynchrone sur Google Geocoder et renvoie Loc, qui est vide, car sa valeur réelle est affectée lorsque la réponse de Google vient. En d'autres termes, allert doit être un gestionnaire de réponse interne: 

 var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; var loc=[]; // next line creates asynchronous request geocoder.geocode( { 'address': address}, function(results, status) { // and this is function which processes response if (status == google.maps.GeocoderStatus.OK) { loc[0]=results[0].geometry.location.lat(); loc[1]=results[0].geometry.location.lng(); alert( loc ); // the place where loc contains geocoded coordinates } else { alert("Geocode was not successful for the following reason: " + status); } }); // pretty meaningless, because it always will be [] // this line is executed right after creating AJAX request, but not after its response comes return loc; } function display(){ codeAddress(); }

C'est ainsi que fonctionne AJAX … le processus aboutit à des gestionnaires de rappel.

Si vous souhaitez séparer le géocodage et la "dispersion", vous pouvez exécuter la fonction d'affichage à l'intérieur du gestionnaire: 

  function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var loc=[]; // no need to define it in outer function now loc[0]=results[0].geometry.location.lat(); loc[1]=results[0].geometry.location.lng(); display( loc ); } else { alert("Geocode was not successful for the following reason: " + status); } }); } function display( long_lat ){ alert(long_lat); }

Html: 

 <input type="button" value="Encode" onclick="codeAddress()">

Vous pouvez le rendre encore plus générique, si vous géochis non seulement pour afficher. Ensuite, vous pouvez définir le rappel en tant que paramètre en fonction codeAddress : 

 function codeAddress( callback ) { ... geocoder.geocode( { 'address': address}, function(results, status) { ... callback( loc ); // instead of dispaly( loc ); ... } ... } codeAddress( display ); // to execute geocoding