Question

我目前在我的网页上有一个样式的pac-input，用于从地方库中使用Google自动填充功能。我一直在尝试添加一个选项以获取位置到下拉列表的顶部，但没有运气。

enter image description here

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>

感谢您的帮助。

Answer 1

我意识到这个问题已经有一年了，OP肯定会处理这个问题，所以这对其他所有人都有兴趣。

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

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

向Google自动填充添加自定义（获取位置）选项

1 个答案: