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

问题描述

我正在与Google样本中的页面保持足够距离的页面上 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform ，它可以正常工作.

I'm working on a page close enough to the one in google samples https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform and it works fine.

不过，我需要添加的另一项功能是将自动完成功能的值默认设置为当前用户所在城市.

However I need to add one more feature is to set the value of the autocomplete by default to be the current user city.

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

I'm using the following code to get the city and the country of the logged in user using geolocation API in HTML5. However the challenge is to make the autocomplete accept this value as it's default value. When I try to put the value in the textbox directly the autocomplete consider it as a wrong value.

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

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

Any idea how to manually fill in the default value for the autocomplete places textbox?

推荐答案

我同样具有在初始加载地图时设置初始位置的要求.

I had the same requirement of setting the initial location when the Map initally loads.

这是我的方法:

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

As Jon Hannah mentioned, I used the Autocomplete Service to get the prediction, then used the first prediction to get the Place (using place_id). Populated the Autocompelete input with my default location string.Finally triggered the place_change event.

  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

这篇关于如何为Google Places API自动完成文本框设置默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！