如何为 Google 放置 API 自动完成文本框设置默认值

How to set a default value for a Google places API auto complete textbox

本文关键字：文本 默认值 设置 Google 放置 API      更新时间：2023-09-26

我正在处理一个足够接近谷歌样本 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform 页面的页面，它工作正常。

但是，我需要再添加一个功能，就是将自动完成的值默认设置为当前用户城市。

我使用以下代码使用 HTML5 中的地理位置 API 获取登录用户的城市和国家/地区。但是，挑战在于使自动完成功能接受此值作为默认值。当我尝试直接将值放入文本框中时，自动完成功能将其视为错误值。

navigator.geolocation.getCurrentPosition(function(pos) {
   var currentLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
   var geocoder = new google.maps.Geocoder();
   var city = "";
   var country = "";
   geocoder.geocode({'latLng': currentLocation}, function(results, status, from) {
      if (status == google.maps.GeocoderStatus.OK) {
         if (results[1]) {
            for (var i = 0; i < results[0].address_components.length; i++) {
               for (var b = 0; b < results[0].address_components[i].types.length; b++) {
                  if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                     city = results[0].address_components[i];
                     break;
                  }
                  if (results[0].address_components[i].types[b] == "country") {
                     country = results[0].address_components[i];
                     break;
                  }
               }
            }
            var fromDefault = city.long_name + " - " + country.long_name;
            $('#address-from').val(fromDefault);
         }
      }
   });
}, 
function(error) {                    
   alert('Unable to get location: ' + error.message);
}, options);

知道如何手动填写自动完成位置文本框的默认值吗？

我有同样的要求，即在地图初始加载时设置初始位置。

我是这样做的：

正如 Jon Hannah 所提到的，我使用自动完成服务来获取预测，然后使用第一个预测来获取地点(使用 place_id(。使用我的默认位置字符串填充了自动填充输入。终于触发了place_change事件。

  this.input.nativeElement.value = this.testLocationStr;
  let autocompleteService = new google.maps.places.AutocompleteService();
  let request = {input: this.testLocationStr};
  autocompleteService.getPlacePredictions(request, (predictionsArr, placesServiceStatus) => {
    console.log('getting place predictions :: predictionsArr = ', predictionsArr, ''n',
      'placesServiceStatus = ', placesServiceStatus);
    let placeRequest = {placeId: predictionsArr[0].place_id};
    let placeService = new google.maps.places.PlacesService(this.mapObj);
    placeService.getDetails(placeRequest, (placeResult, placeServiceStatus) => {
      console.log('placeService :: placeResult = ', placeResult, ''n',
        'placeServiceStatus = ', placeServiceStatus);
      this._handlePlaceChange(placeResult);
    });
  });

普伦克：https://plnkr.co/edit/9oN6Kg?p=preview

我在尝试解决类似的用例时遇到了这篇文章(使用用户搜索的最后一个位置填充自动完成(。

据我所知，无法为它识别为地点的自动完成设置默认值。但是，我认为您可以使用自动完成服务模拟此效果(示例 - 另请参阅 #AutocompletePrediction 和 #PlacesService 的参考部分(：

  • 将自动完成设置为已识别的城市和国家/地区
  • 将城市和国家/地区传递给自动完成服务
  • 确定首选预测的地点 ID(例如，选择类型为 ="city"的第一个预测(
  • 使用地点服务获取所选地点 ID 的详细信息 (PlaceResult((与使用 autocomplete.getPlace(( 的结果相同(
  • 有一个回调，该回调对 PlaceResult 执行您需要的操作

这会给您的用户留下自动完成正在使用的印象。如果结果是他们需要的，那就太好了！如果他们想搜索其他位置，请将自动完成设置为侦听place_changed并运行autocomplete.getPlace((，然后运行相同的回调。

相关文章：