Question

我想向用户提供一个文本框，其中可以输入他们的地址。当他们键入地址时，我想向用户提供他们尝试键入的地址的建议/预测。我也担心这个地址的相关性（例如，地址不是世界各地的地址）。

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

Answer 1

您可以使用Google商家信息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>

Answer 2

查看 address-suggestion 和the demo。它是使用jQuery和Google Maps地理编码API实现的。

Answer 3

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

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

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

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

自动填充地址+ Google Maps API

5 个答案: