如何显示谷歌的地方自动完成数据到文本框



我正在为我的项目实现Google Place自动完成,但我不擅长Google代码,所以我希望有人帮助我。

现在我正在尝试与谷歌地方自动完成是存储搜索值到文本框,这是:

  1. 地址1
  2. 地址2
  3. 城市
  4. 邮编
  5. 国家
  6. <
  7. 经度/gh>

这是我非常基本的代码:

JS部分:

<script type='text/javascript'>
    //<![CDATA[
    window.onload = function() {
        var input = document.getElementById('searchTextField');
        var options = {
            componentRestrictions : {
                country : 'de' // What to pass here, If I want to allow search result from all country?
            }
        };
        new google.maps.places.Autocomplete(input, options);
    }//]]>
</script>

HTML部分:

<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>

我的JSFiddle: http://jsfiddle.net/SDPHm/258/

注意:我想允许从所有国家搜索

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

在代码中添加一个侦听器以获取address_components,如下所示:

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);
});
获取一个address_components

希望有帮助。:)

注:请澄清自动补全是提供来自所有国家或某个国家的结果。

相关内容

  • 没有找到相关文章

最新更新