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

Posted 2023-03-05

【中文标题】如何为 Google Places API 自动完成文本框设置默认值

【英文标题】：How to set a default value for a Google places API auto complete textbox

【发布时间】：2016-05-25 23:35:41

【问题描述】：

我正在处理一个与谷歌示例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);

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

【问题讨论】：

你能为此创建一个 sn-p 或 bin 吗？

你解决了吗？？？请帮助我也遇到同样的问题....

很抱歉回复晚了，但不，我没有解决它，我不得不走很长的路来构建一段时间的自定义自动完成功能。如果您有任何问题，请告诉我

【参考方案1】：

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

我就是这样做的：

正如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);

    );
  );

Plunker：https://plnkr.co/edit/9oN6Kg?p=preview

【讨论】：

这太棒了！谢谢。

【参考方案2】：

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

据我所知，无法为它识别为地点的自动完成设置默认值。但是，我认为您可以使用Autocomplete Service（example - 另请参阅#AutocompletePrediction 和#PlacesService 的参考部分）来模拟这种效果：

将自动完成设置为已识别的城市和国家/地区 将城市和国家/地区传递给自动完成服务 确定首选预测的地点 ID（例如，选择 type = 'city' 的第一个预测） 使用 Places Service 获取所选地点 ID 的详细信息 (PlaceResult)（与使用 autocomplete.getPlace() 的结果相同） 有一个回调来满足您对 PlaceResult 的需求

这会让您的用户觉得自动完成功能正在使用中。如果结果是他们需要的，那就太好了！如果他们想搜索不同的地方，请设置您的自动完成以侦听 place_changed 并运行 autocomplete.getPlace() 后跟相同的回调。

【讨论】：

如果可以的话，请相信这个答案

我不明白 - 你要我做什么？

我认为他希望你对答案宣战