自动填充地址 + Google Maps API答案

【问题标题】：Autofill Address + Google Maps API自动填充地址 + Google Maps API
【发布时间】：2011-05-02 22:42:25
【问题描述】：

我想向我的用户展示一个文本框，他们可以在其中输入地址。当他们输入地址时，我想为用户提供他们尝试输入的地址的建议/预测。我还担心此地址的相关性（例如，该地址不是世界另一端的地址）。

这可能吗？我正在使用 jQuery。

【问题讨论】：

这可能不是 jquery 问题。您需要输入一些第三方供应商，他们在运行时为您提供地址，例如 QAS 服务。
不知道有没有免费的provider，我们在我们公司实现了，用的是QAS。
qas.com/home.htm ，检查这是否是您要实现的。
是时候更改您的用户名了吗？

标签： jquery google-maps geolocation google-maps-api-3 geocoding

【解决方案1】：

您可以使用 Google Places API 自动完成地址。选择地址时，address_components 字段包含结构化地址数据（例如街道、城市、国家/地区），并且可以轻松转换为单独的字段。

这是一个简短的工作演示：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
    </body>
</html>

【讨论】：

有没有办法让它自动填充不同的输入？因此，如果您从输入第一行开始，它会为您提供地址选项，当您单击它时，它会自动在多个输入中填充地址？
如何在地图上显示选定的位置，请帮帮我
哇，这非常简单明了，谢谢！

【解决方案2】：

看看 address-suggestion 和 the demo。它是用 jQuery 和Google Maps geocode API 实现的。

【讨论】：

【解决方案3】：

https://github.com/ubilabs/geocomplete 应该适合你。如有必要，您还可以显示地图。

如果您在不显示地图的情况下使用插件，则必须在文本字段下显示“由 Google 提供支持”徽标。

【讨论】：

【解决方案4】：

@Maksym Kozlenko 的运行版本回答对于那些希望看到这一点的人。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
    </body>
</html>

【讨论】：

【解决方案5】：

您必须使用 API 密钥。

见参考here.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>

    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIWSqJ5-3D-UviE0ZLO4U6AjhVcn58y4g&libraries=places&callback=initMap"></script>
        <script>
            function initMap(){
                var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                    var place = autocomplete.getPlace();
                    console.log(place.address_components);
                });
            }
        </script>
    </body>
</html>

【讨论】：