Javascript Girl
  1. Javascript Girl
  3. Comment utiliser l'adresse au lieu de Lat / Long dans Google Map API
Intereting Posts
Dojo La grille améliorée avec la pagination doit accéder au nombre de lignes dans la page Comment obtenir le dernier jour du mois Comment feriez-vous les téléchargements de fichiers dans une application React-Relay? Ajax – 500 Erreur interne du serveur Générer dynamiquement des axes et des séries dans Extjs 4 Jquery unbinding events speed augmente Angular js ng: répétez une liste de boutons radio de la portée avec un contrôle par défaut Fermez un menu avec un clic n'importe où Extension chrome: exécuter le script après la page a terminé le chargement du javascript Comment puis-je chaîner trois appels asynchrones en utilisant des promesses jQuery? Comment convertir le fichier KMZ en KML en utilisant javascript? Comment ajouter une classe (active) sur "Li" spécifique sur le clic de l'utilisateur avec jQuery Libération de la mémoire utilisée par les nœuds DOM non attachés en Javascript Supprime l'auditeur d'événement avec d3js ne fonctionne pas JQuery .each () en arrière

Comment utiliser l'adresse au lieu de Lat / Long dans Google Map API

Je souhaite utiliser Google Map Markers pour marquer les endroits où nous fournissons nos services. MY Code utilisant Lat / Long fonctionne bien, mais dans mon projet, je dois utiliser les noms de ville au lieu de lat / long. Comment puis-je accomplir cela, y at-il un moyen de le faire? Voici mon code 

<div id="map" style="height:500px;"></div> <script> var neighborhoods = [ { lat: 31.6400, lng: 74.8600 }, { lat: 28.6139, lng: 77.2090 }, { lat: 12.9667, lng: 77.5667 }, { lat: 31.3260, lng: 75.5760 }, { lat: 30.7500, lng: 76.7800 }, { lat: 30.3400, lng: 76.3800 } ]; var markers = []; var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: { lat: 28.6139, lng: 77.2090 } }); } function drop() { clearMarkers(); for (var i = 0; i < neighborhoods.length; i++) { addMarkerWithTimeout(neighborhoods[i], i * 200); } } function addMarkerWithTimeout(position, timeout) { window.setTimeout(function () { markers.push(new google.maps.Marker({ position: position, map: map, title: 'Jassie', animation: google.maps.Animation.DROP })); }, timeout); } function clearMarkers() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; } $(window).load(function () { drop(); }); </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_Key&signed_in=true&callback=initMap"> </script> </div>

Vous devez utiliser l'API de géocodage. Un exemple pour créer une adresse vers lat / lng: 

  doGeocode: function (address, postal_code, callback) { console.log("TEST: "+address.toString()); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address, 'componentRestrictions': { 'postalCode': postal_code, 'country': 'de' } }, function (results, status) { if (status === google.maps.GeocoderStatus.OK) { callback(results); } else { //Error handling alert('Geocode was not successful for the following reason: ' + status); } });

Remarque: L'adresse peut également contenir le numéro de maison mais entrer un espace blanc.

Il existe également une façon inverse d'obtenir des adresses de lat / lng. Dans le cas où certains ont besoin de cela: 

 reverseGeocoder: function (lat, lng, callback) { var geocoder = new google.maps.Geocoder; var addressComponents = {}; geocoder.geocode({ 'location': { lat:lat, lng: lng } }, function (results, status){ if(status === google.maps.GeocoderStatus.OK){ if (results[1]) { var result = results[0].address_components; for (var i = 0; i < result.length; i++) { if (result[i].types[0] == "route") { console.log(result[i].long_name); addressComponents.route = result[i].long_name } if (result[i].types[0] == "street_number") { console.log(result[i].long_name); addressComponents.street_number = result[i].long_name } if (result[i].types[0] == "locality") { console.log(result[i].long_name); addressComponents.locality = result[i].long_name } if (result[i].types[0] == "postal_code") { console.log(result[i].long_name); addressComponents.postal_code = result[i].long_name } } callback(addressComponents); } else { alert('No information found.'); } }else { alert("Die geolocation abfrage konnte leider nicht ausgeführt werden. "+status); } });

À partir de la première fonction ci-dessus, vous obtiendrez le Lat / Lng. Ensuite, utilisez simplement une fonction comme celle-ci: 

 var newMarkers = []; //Global marker array marker: function (lat, lng) { console.log("new marker"); //console.log("LAT: "+lat+ "LNG: "+lng); var marker = new google.maps.Marker({ position: {lat: lat, lng: lng}, icon: icon, map: map }); markers.push(marker); marker.addListener('click', function () { //InfoWindow or whatever u want }); map.setCenter({lat: lat, lng: lng}); map.setZoom(16); },

Selon la spécification ( https://developers.google.com/maps/documentation/javascript/markers ), vous devez utiliser une valeur longue / lat pour ajouter un marqueur. Cependant, vous pouvez utiliser l'API Google Geocoding ( https://developers.google.com/maps/documentation/geocoding/intro ) pour traduire une adresse en une valeur longue / lat. Donc, votre flux devient fondamentalement:

  • Adresse geocode x
  • Prenez le résultat et utilisez-le dans le marqueur