Google Maps API - 透明傳遞地址組件

Question

我有一個帶有文本區域的web表單，用戶可以在其中輸入地址。我需要表單不僅要存儲格式化地址（目前正在工作），還要透明地通過地址組件存儲在後端數據庫中。

低於當前代碼預測可能的地址作爲用戶類型：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places&amp;key=*******************"></script> 


*** snip *** 

<script> 
    function init() { 
     var options = { 
      componentRestrictions: { 
       country: 'NZ' 
      } 
     }; 
     var input = document.getElementById('streetAddress'); 
     var autocomplete = new google.maps.places.Autocomplete(input, options);  <-- autocomplete is never used? 
    } 
    google.maps.event.addDomListener(window, 'load', init); 
    </script> 


*** snip *** 

<div class="form-group"> 
    <label for="streetAddress" class="col-sm-2 control-label">Location</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="streetAddress" placeholder="Street Address" name="location"/> 
    </div> 
</div> 

我假設我需要調用一個第二谷歌功能 - 地址解析器，其的onClick後從地址字符串返回地址解析的地址陣列在上面的函數中。

然後，我可以將其組件存儲在隱藏的html表單輸入元素中，除非有更好的方法。

正在使用Thymeleaf和spring-boot將數據導入後端。

Answer 1

我會這樣做的方式是添加一些元素到您的頁面，隱藏存儲和通過地址。

下面的示例通過街道號 - 您可以從那裏擴展它。該HTML & Thymeleaf：

<div class="form-group"> 
    <label for="streetAddress" class="col-sm-2 control-label">Location</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="streetAddress" placeholder="Street Address" name="location" th:field="*{formattedAddress}" /> 
     <input type="text" class="form-control hidden" id="streetnumber" th:field="*{streetNumber}" /> <!--hidden--> 
    </div> 

現在的javascript：

var options = { componentRestrictions: { country: 'NZ' } }; 
var input = document.getElementById('streetAddress'); 
var autocomplete = new google.maps.places.Autocomplete(input, options); 


autocomplete.addListener('place_changed', function() { 
console.log(autocomplete.getPlace()); 
var place = autocomplete.getPlace(); 
console.log(place.address_components[0].short_name); 
var streetNumber = document.getElementById("streetnumber"); 
streetNumber.value = place.address_components[0].short_name; 
}); 

錯誤處理需要。