如何将Google地方自动填充数据显示到文本框

时间:2014-08-02 12:43:29

标签: jquery google-maps-api-3 autocomplete google-api google-places-api

我正在为我的项目实施Google Place Autocomplete,但我对Google代码不满意,所以我希望有人帮助我。

现在我正在尝试使用Google Place Autocomplete将搜索到的值存储到文本框中,其中包括:

  1. 街道地址1
  2. 街道地址2
  3. 国家
  4. 邮政编码
  5. 国家
  6. 纬度
  7. 经度
  8. 以下是我的基本代码:

    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/

    注意:我希望允许所有国家/地区进行搜索。

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

1 个答案:

答案 0 :(得分:0)

在代码中添加一个监听器来捕获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);
});

有关详细信息,请参阅此链接:Get a address_components

希望有所帮助。 :)

P.S。请说明自动填充是否是为了提供所有国家/地区或某个国家/地区的结果。