📜  谷歌自动完成不返回 lat long - Javascript (1)

📅  最后修改于: 2023-12-03 15:12:12.925000             🧑  作者: Mango

谷歌自动完成不返回lat long - Javascript

简介

谷歌自动完成是一种帮助用户快速输入搜索词语的技术,它会根据用户输入的前几个字符,返回与之匹配的结果,如下拉框形式显示在搜索框下方。然而,在使用谷歌自动完成时,可能遇到它不返回lat long的问题。这时,我们需要使用JavaScript来获取到lat long。

在下面的介绍中,我们将会学习如何使用JavaScript来解决谷歌自动完成不返回lat long的问题,以便我们更好地利用谷歌自动完成功能。

解决方法

首先,我们需要利用JavaScript获取到搜索框中的值,然后使用Google Maps Geocoding API来获取到经纬度坐标。

// 获取输入框的值
var input = document.getElementById('input-id').value;

// 使用 Google Maps Geocoding API 获取地址对应的经纬度坐标
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: input }, function(results, status) {
  if (status == 'OK') {
    // 获取坐标
    var lat = results[0].geometry.location.lat();
    var lng = results[0].geometry.location.lng();
    console.log('lat: ' + lat + ', lng: ' + lng);
  } else {
    console.log('Geocode was not successful for the following reason: ' + status);
  }
});

以上代码获取了输入框的值,并使用Google Maps Geocoding API来获取到地址对应的经纬度坐标。如果获取成功,将会打印出lat和lng的值。如果获取失败,将会打印错误信息。

接下来,我们需要在谷歌自动完成的回调函数中使用上述代码来获取经纬度坐标。例如:

var autocomplete = new google.maps.places.Autocomplete(document.getElementById('input-id'));

// 监听选择事件
autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();
  if (!place.geometry) {
    console.log('Place details not found.');
    return;
  }

  // 获取经纬度坐标
  var lat = place.geometry.location.lat();
  var lng = place.geometry.location.lng();
  console.log('lat: ' + lat + ', lng: ' + lng);
});

以上代码使用了谷歌自动完成的回调函数来获取到选中的地址,然后使用Google Maps Geocoding API来获取到经纬度坐标。如果获取成功,将会打印出lat和lng的值。

总结

以上就是解决谷歌自动完成不返回lat long的问题的方法。我们可以使用JavaScript来获取到输入框中的值,然后使用Google Maps Geocoding API来获取到地址对应的经纬度坐标。在谷歌自动完成的回调函数中,我们可以使用以上方法来获取到选中地址的经纬度坐标,从而解决谷歌自动完成不返回lat long的问题。