logo标签列表

自动填充地址 + Google Maps API

jquerygoogle-mapsgeolocationgoogle-maps-api-3geocoding
22
我想向我的用户展示一个文本框，他们可以在其中输入他们的地址。当他们输入他们的地址时，我想为用户提供他们正在尝试输入的地址的建议/预测。我还关心这个地址的相关性（例如，该地址不是世界另一端的地址）。
这是否可能？我正在使用jQuery。
这可能不是jQuery问题。你需要与一些第三方供应商打交道，他们在运行时为你提供地址，例如QAS服务。 - kobe
我不知道是否有免费的服务提供者，我们在公司实施并使用了QAS。 - kobe
请访问http://www.qas.com/home.htm，确认这是否是您要实现的内容。 - kobe
2
是时候更改您的用户名了吗？ - Peter Mortensen
5个回答
56

您可以使用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>
有没有办法让它自动填充不同的输入？因此，如果您首先输入第一行并且它给您提供地址选项，当您单击它时，它会自动填充多个输入中的地址？ - Alan Doolan
我该如何在地图上显示所选位置，请帮帮我。 - Erum
哇，这真是非常简单和直接了当，谢谢啊！ - Brian
7
6
运行@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>

6

https://github.com/ubilabs/geocomplete 可以为您提供帮助。 如果需要，您还可以显示地图。

如果您在不显示地图的情况下使用插件，则必须在文本字段下方显示“由Google驱动”的标志。

2

您需要使用API密钥。

请参见此处的参考文献。

<!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接