2015-07-21 75 views
3

我使用谷歌的自動填充地址API來填充位置,但我想要的是填充城市後,地址的文本框應該只顯示該城市地址的建議,而不是所有地址。下面是城市和地址的HTML代碼限制谷歌自動填充位置到一個特定的城市

<div class="form-group"> 
<label class="col-md-3 control-label" for="example-text-input">Base City</label> 
<div class="col-md-3"> 
<input type="text" id="loca" name="City" class="form-control" > 
</div> 
</div> 
<div class="form-group"> 
<label class="col-md-3 control-label" for="example-text-input">Base Location</label> 
<div class="col-md-3"> 
<input type="text" id="locb" name="Location" class="form-control" > 
</div> 
</div> 

腳本的谷歌API的地址建議

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script> 
    <script> 
     var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {}); 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place = autocomplete.getPlace(); 
      console.log(place.address_components); 
     }); 
    </script> 

回答

0

據我所知,目前,谷歌API不支持城市名稱的約束。因此,您應該使用經度和緯度來設置邊界或您選擇的城市周圍的區域(f.e.obj.geometry.viewport)。

觀點不僅會從你選擇的城市返回街道,還會從周圍的城市返回街道,例如,如果你選擇紐約市,它將返回紐約市和布魯克林的結果。因此,在我建議的代碼中,autocomplete會向您推薦來自兩個鄰近城市的結果,但代碼稍後會解析用戶選擇的內容並確保城市匹配,如果城市不匹配,則會將兩個字段設置爲空字符串。

此外,我寫我的代碼的方式是,第二個字段上的自動完成只有在第一個字段中的選擇作出後纔會打開。更好的辦法是讓第二個領域只出現在第一個領域被選中,但這是你應該自己做的。此外,還有一個潛在的錯誤,它與自動完成存儲以前選擇的值的方式有關,如果您希望代碼100%正常工作,您可能希望清除自動填充功能的現金或字段本身,而不是$(「#locb」).val ( '');

var autocompleteA = new google.maps.places.Autocomplete($("#loca")[0], { types: ['(cities)'] }); 
 
     google.maps.event.addListener(autocompleteA, 'place_changed', function() { 
 
      var placeA = autocompleteA.getPlace(); 
 
      var boundsByViewport = autocompleteA.getPlace().geometry.viewport; 
 
      var autocompleteB = new google.maps.places.Autocomplete($("#locb")[0], { 
 
       bounds: boundsByViewport, 
 
       types: ['address'] 
 
      }); 
 
      google.maps.event.addListener(autocompleteB, 'place_changed', function() { 
 
       var placeB = autocompleteB.getPlace(); 
 
       var match = false; 
 
       for (var i = 0; i < placeB.address_components.length; i++) { 
 
        if ((placeA.address_components[0]).long_name === (placeB.address_components[i].long_name)) { 
 
         { //"The city names matched" 
 
          //do what you need with it 
 
          alert("City is the same"); 
 
          match = true; 
 
          break; 
 
         } 
 
        } 
 
       } 
 
       if (!match) {  //warn that it is not the right adress 
 
        alert("The city names didn't match."); 
 
        
 
        //clear value of the Location field 
 
        $("#loca").val(''); 
 
        $("#locb").val(''); 
 
       } 
 
      }); 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script> 
 

 
<body> 
 
    <div class="form-group"> 
 
     <label class="col-md-3 control-label" for="example-text-input">Base City</label> 
 
     <div class="col-md-3"> 
 
      <input type="text" id="loca" name="City" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="col-md-3 control-label" for="example-text-input">Base Location</label> 
 
     <div class="col-md-3"> 
 
      <input type="text" id="locb" name="Location" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </body>

相關問題