使用Google Autocomplete API根据地点名称获取纬度和经度

Question

使用Google Autocomplete API根据地点名称获取纬度和经度

javascriptgoogle-mapsgeocodinglatitude-longitude

44

我在页面上有一个文本框，用于输入位置名称，并有一个带有文本“getLat&Long”的按钮。现在，当单击该按钮时，我需要在文本框中显示该位置的latitude和longitude。有什么建议吗？

- Chandra

http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true 更多信息请参考 https://developers.google.com/maps/documentation/geocoding/ - zzart

7个回答

45

希望这能在未来帮到某些人。

你可以使用Google Geocoding API，正如之前所述，我最近也用它做了一些工作，希望这有所帮助：

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

现在这个功能还有自动完成功能，你可以在代码中看到。它从输入中获取地址并通过 API 进行自动完成。

一旦您有了地址，请点击按钮，您将通过警报获得结果。请注意，此函数使用最新的 API，并加载“places”库（调用 API 时会使用“libraries”参数）。

希望这有所帮助，更多信息请阅读文档，干杯。

编辑 #1: Fiddle

- Ariel

1

是的，谢谢！lat() lng() 很完美，因为它们似乎随着实际属性（如“k”和“A”）或其他奇怪的属性在请求之间随机变化。你很棒。 - King Friday

这需要 API 密钥吗？ - Supertecnoboff

@Supertecnoboff可以不使用API密钥，但您将无法获得其优势。请查看Google关于API密钥的说明。此外，我还创建了一个Fiddle。 - Ariel

@Ariel，我使用了你的代码，但在我的应用程序中使用相同的代码却被拒绝了，但在fiddle上它却可以正常工作，为什么？ - 3 rules

@3rules，我不知道为什么它对你不起作用。我刚在本地尝试了一下，完全没有问题，我上传了一个pastebin，这样你就可以复制并粘贴这个html：https://pastebin.com/BQSZwm6D。将其复制并粘贴到新的html中并打开它，它对我有效。在SO上打开一个新问题，公开相关代码并给我链接以便查看。干杯！ - Ariel

@Ariel 是的，在 jsfiddle 上它运行良好，但在我的应用程序中却不行...我会再次测试并回来... - 3 rules

17

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

其中 OUTPUT 可以为 json 或 xml;

有关 Google 地图 API 的详细信息，请访问以下网址：

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

希望这可以帮助到您。

- Sujeet

1

这太棒了！只有一个问题，需要 API 密钥吗？ - Supertecnoboff

9

以下是我使用的代码。它完美地运行着。

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

希望这能有所帮助。

- ducnguyenvn

8

我希望这将更有用，包含自动完成Google API功能及经纬度的未来范围。

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>

- Ashish Chaturvedi

2

我建议您使用以下代码，您可以使用此<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>获取位置的纬度和经度，虽然可能不是非常准确，但这对我有用；

以下是代码片段。

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

- user28864

1

通过自动完成输入位置并填写其他所有字段：纬度和经度值将自动填充。
请使用您的Google API密钥替换API KEY。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>

<body>
<textarea placeholder="Enter Area name to populate Latitude and Longitude" name="address" onFocus="initializeAutocomplete()" id="locality" ></textarea><br>

<input type="text" name="city" id="city" placeholder="City" value="" ><br>
<input type="text" name="latitude" id="latitude" placeholder="Latitude" value="" ><br>
<input type="text" name="longitude" id="longitude" placeholder="Longitude" value="" ><br>
<input type="text" name="place_id" id="location_id" placeholder="Location Ids" value="" ><br>

<script type="text/javascript">
  function initializeAutocomplete(){
    var input = document.getElementById('locality');
    // var options = {
    //   types: ['(regions)'],
    //   componentRestrictions: {country: "IN"}
    // };
    var options = {}

    var autocomplete = new google.maps.places.Autocomplete(input, options);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      var place = autocomplete.getPlace();
      var lat = place.geometry.location.lat();
      var lng = place.geometry.location.lng();
      var placeId = place.place_id;
      // to set city name, using the locality param
      var componentForm = {
        locality: 'short_name',
      };
      for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
          var val = place.address_components[i][componentForm[addressType]];
          document.getElementById("city").value = val;
        }
      }
      document.getElementById("latitude").value = lat;
      document.getElementById("longitude").value = lng;
      document.getElementById("location_id").value = placeId;
    });
  }
</script>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=API KEY"></script>


<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500></script>

- Nɪsʜᴀɴᴛʜ ॐ

我该如何将国家和行政区添加到这个解决方案中？我想要包括国家、行政区（州）、城市、纬度和经度。 - Marthinus Strydom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RedBlueThing · Accepted Answer

你可以使用Google Geocoder服务在Google Maps API中将你的位置名称转换为纬度和经度。所以你需要类似以下的代码：

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

更新

您是否包含v3 JavaScript API？

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