填写谷歌地图自动填充与预测结果

问题描述：

我现在有一个地方自动完成，显示一个国家的结果。我想要做的是让它显示更多国家的结果（限于2或3）。填写谷歌地图自动填充与预测结果

据我所知，这是不可能的当前版本的自动完成（https://code.google.com/p/gmaps-api-issues/issues/detail?id=4233）所以我要做的是得到两个预测列表，并显示它们而不是自动完成结果。

有没有什么办法触发自动填充的下拉部分，并用预测列表填充它？

在输入的onChange触发代码：

var inputData = this.value; 
var options = { 
     componentRestrictions: { country: "be" } 
}; 
service = new google.maps.places.AutocompleteService(); 
var request = { 
    input: inputData, 
    componentRestrictions: {country: 'be'}, 
}; 
var secondaryRequest = { 
    input: inputData, 
    componentRestrictions: {country: 'lu'}, 
}; 
service.getPlacePredictions(request, callback); 
service.getPlacePredictions(secondaryRequest, callback);

回调函数：

function callback(predictions, status) { 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
    alert(status); 
    return; 
    } 
    //here I need to display that dropdown if it isn't already 
    // and then add the results of the current predictions. 
}

因此，我使用上面的代码和自定义'弹出'div来显示结果。如果任何人有更好的主意，我会将问题留待几天。之后我会发布我的解决方案（因为它需要一些清理）。 – 2014-11-06 08:19:59

答

这里是我的演示解决方案。正如评论中所述。它使用几个调用来获得预测并与他们一起建立结果列表。当选择结果时，地址将被地理编码。这意味着3次调用，而不是1与自动完成，但到目前为止，我还没有找到解决方法。

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Retrieving Autocomplete Predictions</title> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&v=3.exp"></script> 
    <script> 

    function initialize() { 
     $("#place").live("keyup", function (evt) {   
      // Clear any previously set timer before setting a new one 
      window.clearTimeout($(this).data("timeout")); 
      $(this).data("timeout", setTimeout(function() { 
       //whe the timeout has expired get the predictions 
       var inputData = $("#place").val();   
       service = new google.maps.places.AutocompleteService(); 
       var request = { 
        input: inputData, 
        componentRestrictions: {country: 'be'}, 
       }; 
       var secondaryRequest = { 
        input: inputData, 
        componentRestrictions: {country: 'lu'}, 
       }; 
       $('#resultWindow').empty(); 
       service.getPlacePredictions(request, callback); 
       service.getPlacePredictions(secondaryRequest, callback);    
      }, 1000)); 
     }); 

     function callback(predictions, status) { 
      if (status != google.maps.places.PlacesServiceStatus.OK) { 
       console.log(status); 
       return; 
      }  
      var resultHTML = ''; 
      for (var i = 0, prediction; prediction = predictions[i]; i++) { 
       resultHTML += '<div>' + prediction.description + '</div>'; 
      } 
      if($('#resultWindow').html() != undefined && $('#resultWindow').html() != ''){  
       resultHTML = $('#resultWindow').html()+ resultHTML; 
      }  
      if(resultHTML != undefined && resultHTML != ''){   
       $('#resultWindow').html(resultHTML).show(); 
      } 
      //add the "powered by google" image at the bottom -> required!! 
      if($('#resultWindow').html() != undefined){ 
       $('#resultWindow #googleImage').remove(); 
       var imageHtml = $('#resultWindow').html() + '<img id="googleImage" src="powered-by-google-on-white2.png"/>'; 
       $('#resultWindow').html(imageHtml); 
      } 
     } 

     function geocodeAddress(address) {  
      var geocoder = new google.maps.Geocoder();  
      geocoder.geocode({'address': address}, function (results, status) 
      { 
       if (status == google.maps.GeocoderStatus.OK) 
       { 
       $('#latitude').val(results[0].geometry.location.lat()); 
       $('#longitude').val(results[0].geometry.location.lng());   
       } 
       else { 
       console.log("Error: " + google.maps.GeocoderStatus); 
       } 
      }); 
     } 
     $('#resultWindow div').live('click',function(){ 
      //get the coördinates for the selected (clicked) address 
      $('#resultWindow').hide(); 
      var address = $(this).text(); 
      var addressParts = address.split(','); 
      $('#country').val(addressParts[2]); 
      $('#city').val(addressParts[1]); 
      $('#place').val(addressParts[0]); 
      if(address != ''){ 
       geocodeAddress(address); 
      } 
     }); 
     /*end custom autocomplete stuff*/ 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    <style type="text/css"> 
    #resultWindow{ 
     position: fixed; 
     /* top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%;*/ 
     background-color: #fff; 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
     z-index: 10000; 
     border: 1px solid black; 
     color:black; 
     display:none; 
    } 
    </style> 
    </head> 
<body> 
<div id="placeholder"> 
    <input type="text" id="place" style="width:200px;"/> 
    <label for="latitude">Latitude</label> 
    <input type="text" id="latitude"/> 
    <label for="longitude">Longitude</label> 
    <input type="text" id="longitude"/> 
    <label for="city">city</label> 
    <input type="text" id="city"/> 
    <label for="country">selected country</label> 
    <input type="text" id="country"/> 
    <div id="resultWindow"></div> 
</div> 
</body> 
</html>

填写谷歌地图自动填充与预测结果

相关推荐