Google지도 자동 완성 예측 결과로

내가 현재 가지고있는 것은 한 국가의 검색 결과를 표시하는 장소 자동 완성입니다. 내가 원하는 것은 더 많은 국가 (2 또는 3 개로 제한)의 결과를 표시하는 것입니다.Google지도 자동 완성 예측 결과로

자동 완성 (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를 사용하여 결과를 표시하기위한 해결 방법을 만들었습니다. 누군가에게 더 좋은 아이디어가있을 경우에 대비하여 며칠 동안 질문을 공개하겠습니다. 그 후에는 솔루션을 게시 할 예정입니다 (이후 정리가 필요하기 때문에). –

가 여기 내 데모 해결책을. 코멘트에서 언급했듯이. 여러 가지 호출을 사용하여 예측을 얻고 결과 목록을 작성합니다. 결과를 선택하면 주소가 지오 코딩됩니다. 이것은 자동 완성과 함께 1 대신 3 번의 호출을 의미하지만 지금까지는 그 방법을 찾지 못했습니다.

<!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

Google지도 자동 완성 예측 결과로

답변

관련 문제