Получить широту и долготу по имени местоположения с помощью API автозаполнения Google

У меня есть текстовое поле на моей странице, которое получает название местоположения и кнопку с текстом getLat&Long. Теперь, щелкнув по моей кнопке, я должен показать оповещение latitude и longitude местоположения в текстовом поле. Любое предложение?

Ответ 1

Вы можете использовать службу Google Geocoder в API Карт Google для преобразования из вашего местоположения в широту и долготу. Поэтому вам нужен код:

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
  }
});

Обновление

Вы включаете API-интерфейс v3 javascript?

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

Ответ 2

Я надеюсь, что это может помочь кому-то в будущем.

Вы можете использовать API геокодирования Google, как было сказано ранее, мне пришлось немного поработать с этим в последнее время, я надеюсь, что это поможет:

<!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>

Теперь у этого есть также функция autocomlpete, которую вы можете видеть в коде, он извлекает адрес из ввода и автоматически вводит API при вводе.

Как только у вас есть адрес, нажмите кнопку, и вы получите свои результаты через оповещение по мере необходимости. Также обратите внимание, что это использует новейший API и загружает библиотеку "мест" (при вызове API использует параметр "libraries" ).

Надеюсь, что это поможет, и прочитайте документацию для получения дополнительной информации, приветствия.

Изменить # 1: Fiddle

Ответ 3

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

OUTPUT = json или xml;

для подробной информации о google map api перейдите по URL:

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

Надеюсь, это поможет

Ответ 4

Ниже приведен код, который я использовал. Он отлично работает.

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);
    }
});

Надеюсь, это поможет.

Ответ 5

Я надеюсь, что это будет более полезно для будущей области, включая автоматическую полную функцию API Google широта и долгота

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

Полный просмотр

<!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

Я бы предложил следующий код, вы можете использовать этот <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>, чтобы получить широту и долготу местоположения, хотя это может быть не так точно, однако это сработало для меня;

фрагмент кода ниже

<!DOCTYPE html>
<html>
<head>
<title>Using Javascript 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>