Google Maps API - 透明通过地址组件答案

【问题标题】：Google Maps API - transparent pass through address componentsGoogle Maps API - 透明通过地址组件
【发布时间】：2017-09-12 23:18:11
【问题描述】：

我有一个带有文本区域的网络表单，用户可以在其中输入地址。我不仅需要表单来存储格式化的地址（当前正在工作），而且还需要透明地通过地址组件存储在后端数据库中。

下面的当前代码预测用户键入时可能的地址：

<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 用于将数据导入后端。

【问题讨论】：

标签： javascript html google-maps-api-3 spring-boot thymeleaf

【解决方案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;
});

需要错误处理。

【讨论】：