Jquery 如何在文本框中显示google place自动完成数据

Jquery 如何在文本框中显示google place自动完成数据,jquery,google-maps-api-3,autocomplete,google-api,google-places-api,Jquery,Google Maps Api 3,Autocomplete,Google Api,Google Places Api,我正在为我的项目实现GooglePlaceAutoComplete,但我不擅长谷歌代码,所以我希望有人能帮助我 现在,我尝试使用Google Place Autocomplete将搜索值存储到文本框中,即: 街道地址1 街道地址2 城市 状态 邮政编码 国 纬度 经度 以下是我的基本代码: JS部分: HTML部分: 我的朋友: 注意:我想允许从所有国家/地区进行搜索 如果有人能帮助我,我真的很感激。在代码中添加一个侦听器,以便在地址组件中显示如下内容: google.maps.event.ad

我正在为我的项目实现GooglePlaceAutoComplete,但我不擅长谷歌代码,所以我希望有人能帮助我

现在,我尝试使用Google Place Autocomplete将搜索值存储到文本框中,即:

街道地址1 街道地址2 城市 状态 邮政编码 国 纬度 经度 以下是我的基本代码:

JS部分:

HTML部分:

我的朋友:

注意:我想允许从所有国家/地区进行搜索


如果有人能帮助我,我真的很感激。

在代码中添加一个侦听器,以便在地址组件中显示如下内容:

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    var components = place.address_components;
    var street = null;
    for (var i = 0, component; component = components[i]; i++) {
        console.log(component);
        if (component.types[0] == 'route') {
            street = component['long_name'];
        }
    }
    alert('Street: ' + street);
});
有关更多详细信息,请参阅此链接:

希望有帮助

请说明自动完成是提供所有国家或某个国家的结果

<label for="searchTextField">Google Place Autocomplete:</label>
<br>
<input id="searchTextField" type="text" size="50">
<br><br>
<div>
    <label for="ad1">Street address 1</label>
    <input type="text" name="ad1" id="ad1" value="" />
</div>
<div>
    <label for="ad2">Street address 2</label>
    <input type="text" name="ad2" id="ad2" value="" />
</div>
<div>
    <label for="city">City</label>
    <input type="text" name="city" id="city" value="" />
</div>
<div>
    <label for="state">State</label>
    <input type="text" name="state" id="state" value="" />
</div>
<div>
    <label for="zcode">Zip code</label>
    <input type="text" name="zcode" id="zcode" value="" />
</div>
<div>
    <label for="country">Country</label>
    <input type="text" name="country" id="country" value="" />
</div>
<div>
    <label for="lat">Latitude</label>
    <input type="text" name="lat" id="lat" value="" />
</div>
<div>
    <label for="long">Longitude</label>
    <input type="text" name="long" id="long" value="" />
</div>
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    var components = place.address_components;
    var street = null;
    for (var i = 0, component; component = components[i]; i++) {
        console.log(component);
        if (component.types[0] == 'route') {
            street = component['long_name'];
        }
    }
    alert('Street: ' + street);
});