填寫谷歌地圖自動填充與預測結果

我現在有一個地方自動完成，顯示一個國家的結果。我想要做的是讓它顯示更多國家的結果（限於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. 
}

來源

2014-11-05 Ruben Verschueren

因此，我使用上面的代碼和自定義'彈出'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>

來源

2014-11-12 12:09:50

填寫谷歌地圖自動填充與預測結果

回答

相關問題