2012-12-27 50 views
1

我試圖從「輸入您的位置」文本框中解析城市和國家。 Google Places Autocomplete擅長檢索地點,但不是每個結果都有一個國家和一個城市(例如,鍵入「Russia」將顯示「Russia」爲最高結果,其中不包含任何城市)。無論用戶類型保存在哪個位置,城市和國家/地區部分都需要單獨存儲。強制Google地方信息自動填充結果包括國家和城市

有沒有辦法強制每個自動完成的結果同時包含一個城市和一個國家,但不是隻限於這兩個? (例如,鍵入 「俄羅斯」 將顯示 「俄羅斯莫斯科」 或 「115 X街,莫斯科,俄羅斯」 等)

回答

0

我的解決方案

<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 

 
    <title>Place Autocomplete</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
    <script src="https://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script> 
 

 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&amp;language=en" type="text/javascript"></script> 
 

 
    <script type="text/javascript"> 
 
    
 
     var autocomplete; 
 
     var place; 
 

 
     function initialize() 
 
     { 
 
     var options  = {types: ['(cities)']}; 
 
     var input   = document.getElementById('searchTextField'); 
 
     
 
     autocomplete = new google.maps.places.Autocomplete(input, options); 
 

 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
      fillInPlace(); 
 
     }); 
 
     } 
 

 
     function fillInPlace() { 
 
     place = autocomplete.getPlace(); 
 
     var $address = $(place['adr_address']); 
 
     $('#resultTextField').val($address.text()); 
 
     } 
 

 
     $(document).on('ready', function(){ 
 
      $("#searchTextField").on('focusout', function(e){ 
 
       setTimeout(function() { 
 
        $("#searchTextField").val(''); 
 
       }, 1000); 
 
      }); 
 
     }) 
 
     
 
     google.maps.event.addDomListener(window, 'load', initialize); 
 

 
    </script> 
 
</head> 
 

 
<body> 
 
    <form class='form'> 
 
    <div class="form-group"> 
 
     <div class="col-xs-12"> 
 
     <label for="searchTextField">City</label> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
     <input id="searchTextField" type="text" placeholder="Search" autocomplete="on" class='form-control pull-left' style='width:40%; margin-right:3px;'> 
 
     <input id="resultTextField" type="text" placeholder="" autocomplete="on" class='form-control pull-left' disabled='disabled' style='width:55%'> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

相關問題