web-dev-qa-db-fra.com

Obtenez la latitude et la longitude en fonction du nom de l'emplacement avec l'API Google Autocomplete

J'ai une zone de texte dans ma page qui obtient un nom d'emplacement et un bouton avec le texte getLat&Long. Maintenant, en cliquant sur mon bouton, je dois afficher une alerte de latitude et longitude de l'emplacement dans la zone de texte. Toute suggestion?

javascriptgoogle-mapsgeocodinglatitude-longitude
39
Chandra

Vous pouvez utiliser le service Google Geocoder dans le Google Maps API pour convertir votre nom de lieu en latitude et longitude. Donc vous avez besoin d'un code comme:

var geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK)
  {
      // do something with the geocoded result
      //
      // results[0].geometry.location.latitude
      // results[0].geometry.location.longitude
  }
});

Mettre à jour

Incluez-vous l'API javascript v3?

<script type="text/javascript"
     src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
41
RedBlueThing

J'espère que cela pourra aider quelqu'un à l'avenir.

Vous pouvez utiliser l’API Google Geocoding API , comme je l’ai déjà dit, j’ai dû travailler avec cela récemment.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script type="text/javascript">
        function initialize() {
        var address = (document.getElementById('my-address'));
        var autocomplete = new google.maps.places.Autocomplete(address);
        autocomplete.setTypes(['geocode']);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

        var address = '';
        if (place.address_components) {
            address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
        }
      });
}
function codeAddress() {
    geocoder = new google.maps.Geocoder();
    var address = document.getElementById("my-address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

      alert("Latitude: "+results[0].geometry.location.lat());
      alert("Longitude: "+results[0].geometry.location.lng());
      } 

      else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <input type="text" id="my-address">
        <button id="getCords" onClick="codeAddress();">getLat&Long</button>
    </body>
</html>

Maintenant, cela a aussi une fonction autocomlpete que vous pouvez voir dans le code, il extrait l'adresse de l'entrée et est complété automatiquement par l'API lors de la frappe.

Une fois que vous avez votre adresse, appuyez sur le bouton et vous obtiendrez vos résultats via une alerte si nécessaire. Veuillez également noter que cela utilise la dernière API et charge la bibliothèque 'places' (lors de l'appel de l'API, le paramètre 'libraries').

J'espère que cela vous aide et lisez la documentation pour plus d'informations, applaudissements.

Edit # 1: Fiddle

36
Ariel

http://maps.googleapis.com/maps/api/geocode/OUTPUT?address=YOUR_LOCATION&sensor=true

OUTPUT = json ou xml;

pour des informations détaillées sur google map api, allez à l'URL:

http://code.google.com/apis/maps/documentation/geocoding/index.html

J'espère que cela aidera

16
Sujeet

Le ci-dessous est le code que j'ai utilisé. Ça fonctionne parfaitement.

var geo = new google.maps.Geocoder;
geo.geocode({'address':address},function(results, status){
    if (status == google.maps.GeocoderStatus.OK) {              
        var myLatLng = results[0].geometry.location;

        // Add some code to work with myLatLng              

    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
});

J'espère que cela aidera.

9
ducnguyenvn

J'espère que cela sera plus utile dans le futur. Contiendra la fonctionnalité complète de Google API avec Latitude et longitude. 

var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();

Vue complète

<!DOCTYPE html>
<html>
    <head>
    <title>Place Autocomplete With Latitude & Longitude </title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
#pac-input {
    background-color: #fff;
    padding: 0 11px 0 13px;
    width: 400px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    text-overflow: Ellipsis;
}
#pac-input:focus {
    border-color: #4d90fe;
    margin-left: -1px;
    padding-left: 14px;  /* Regular padding-left + 1. */
    width: 401px;
}
}
</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script>


  function initialize() {
        var address = (document.getElementById('pac-input'));
        var autocomplete = new google.maps.places.Autocomplete(address);
        autocomplete.setTypes(['geocode']);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

        var address = '';
        if (place.address_components) {
            address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
        }
        /*********************************************************************/
        /* var address contain your autocomplete address *********************/
        /* place.geometry.location.lat() && place.geometry.location.lat() ****/
        /* will be used for current address latitude and longitude************/
        /*********************************************************************/
        document.getElementById('lat').innerHTML = place.geometry.location.lat();
        document.getElementById('long').innerHTML = place.geometry.location.lng();
        });
  }

   google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    </head>
    <body>
<input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
</body>
</html>
6
Ashish Chaturvedi

Je suggérerais le code suivant. Vous pouvez utiliser ce <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script> pour obtenir la latitude et la longitude d’un lieu, même s’il est peut-être moins précis, mais cela a fonctionné pour moi;

extrait de code ci-dessous

<!DOCTYPE html>
<html>
<head>
<title>Using Javascript's Geolocation API</title>

<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="mapContainer"></div> 

<script type="text/javascript">

        var lat = geoip_latitude();
        var long = geoip_longitude();
        document.write("Latitude: "+lat+"</br>Longitude: "+long);

</script> 
</body>
</html>
2
user28864