向 Google 自动完成添加自定义（获取位置）选项答案

【问题标题】：Add custom (get location) option to Google Autocomplete向 Google 自动完成添加自定义（获取位置）选项
【发布时间】：2014-04-27 03:37:00
【问题描述】：

我目前在我的页面上有一个样式化的 pac-input，用于与 Places Library 中的 Google Autocomplete 一起使用。我一直在尝试将获取位置的选项添加到下拉列表的顶部，但没有成功。

Javascript（我不是 js wiz）-

  var lat = 'empty';
    var lng = 'empty';
    var placeSearch, autocomplete;
    var place;
    var geocoder;


    function initialize() {

  geocoder = new google.maps.Geocoder();
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('pac-input')),
      { types: ['geocode', 'establishment'], 
        componentRestrictions: {country: 'GB'}});
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
  place = autocomplete.getPlace();
      lat = place.geometry.location.lat();
      lng = place.geometry.location.lng();
      document.getElementById('please').style.display = "none";
      document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
  });

}


function getlocation() {
 if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    $('#wait').show();
    $('#getlocation').hide();

    }
  else{document.getElementById('lat').innerHTML="Geolocation is not supported by this browser.";}
  }


function showPosition(position)
  {
  lat = position.coords.latitude;
  lng = position.coords.longitude;
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        document.getElementById('pac-input').value = (results[0].formatted_address.split(",")[0]);
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
  $('#wait').hide();
  $('#getlocation').show();
   document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
      document.getElementById('please').style.display = "none";
  }

function blurred() {
/////////bug if type and select location, click out, retype and click out. can i store the name as variable and check value against that?
  var beginning = document.getElementById('pac-input').value.split(",")[0];
  place = autocomplete.getPlace();
  if (! place) {
    lat = 'empty';
    lng = 'empty';
    document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
  } else {  if (! place.geometry) {
    lat = 'empty';
    lng = 'empty';
    document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
  }else{ if (beginning != place.name) {
    lat = 'empty';
    lng = 'empty';
    document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
  }}}

if (lat == 'empty') {
  document.getElementById('please').style.display = "inline-block";
}}


function focused() {
  document.getElementById('pac-input').value = "";
  if (lat != 'empty'){
  lat = 'empty';
  lng = 'empty';
}}

HTML -

 <body onload="initialize()">
    <div id="center">
    <div id="areacontainer">
      <input id="pac-input" placeholder="Area..." value=""
             onFocus="focused()" onblur="blurred()" type="text" onchange="go()">
      </input>
      <div id="getlocation" onclick="getlocation()"></div><div id="wait"></div>
    </div>
      <div id="lat"></div>
      <div id="please">Please enter a valid location.</div>
  </div>
  </body>

感谢您的帮助。

【问题讨论】：

标签： google-maps-api-3 autocomplete google-places-api

【解决方案1】：

我意识到这个问题已经存在一年了，而且 OP 肯定会处理这个问题，所以这是给其他所有感兴趣的人的。

虽然可以在 select 的 keyup 上设置一个处理程序来修改它们被接收和显示之间的选项，但解决方案可能会很麻烦。还有一个 IE 问题，可能会妨碍下拉选项列表显示非 DOM 窗口。

请考虑使用AutocompleteService 以编程方式获取预测。它不提供像 Autocomplete 这样的预定义 UI，而是返回一个结果列表，可以根据需要进行修改并以适合您的应用程序的方式显示，如下拉列表或其他方式。

【讨论】：