Question

使用Google Maps API和JQuery我希望有一个地址字段，在输入时会自动填写输入的地址。如何实现这一目标？

Answer 1

嗯，迟到总比没有好。 Google maps API v3现在提供地址自动完成功能。

API文档位于：http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

这是一个很好的例子： http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

Answer 2

Below I split all the details of formatted address like City, State, Country and Zip code. 
So when you start typing your street name and select any option then street name write over street field, city name write over city field and all other fields like state, country and zip code will fill automatically. 
Using Google APIs.
------------------------------------------------
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
    var places = new google.maps.places.Autocomplete(document
            .getElementById('txtPlaces'));
    google.maps.event.addListener(places, 'place_changed', function() {
        var place = places.getPlace();
        var address = place.formatted_address;
        var  value = address.split(",");
        count=value.length;
        country=value[count-1];
        state=value[count-2];
        city=value[count-3];
        var z=state.split(" ");
        document.getElementById("selCountry").text = country;
        var i =z.length;
        document.getElementById("pstate").value = z[1];
        if(i>2)
        document.getElementById("pzcode").value = z[2];
        document.getElementById("pCity").value = city;
        var latitude = place.geometry.location.lat();
        var longitude = place.geometry.location.lng();
        var mesg = address;
        document.getElementById("txtPlaces").value = mesg;
        var lati = latitude;
        document.getElementById("plati").value = lati;
        var longi = longitude;
        document.getElementById("plongi").value = longi;            
    });
});

Answer 3

Google Places Autocomplete API is missing some important functions和其他人一样。举例来说，Google不会验证街道号码是真实的，也不会将其输入标准化格式。因此，用户有责任正确输入地址的那一部分。

Google也不会预测邮政信箱或公寓号码。因此，如果您要使用他们的API进行运输，地址清理或数据治理，则可能需要一种可以验证建筑物编号，自动填写单位编号并标准化信息的API。

完全公开，我为SmartyStreets工作

Answer 4

漂移了一下，但是当用户使用查找表输入她的邮政编码时，自动填写美国城市/州或CA城市/普罗旺斯会相对容易。

如果你可以迫使人们屈服于你的意愿，你就可以做到这一点：

用户输入：邮政（zip）代码

您填写：州，市（省，加拿大）
用户开始输入：街道名称

您：自动填充
您显示：一系列允许的地址编号

用户输入数字

完成。

以下是人们如何做到这一点：

用户输入地址编号

你：什么都不做
用户开始输入：街道名称

您：自动填充，从该国所有街道的大量列表中提取
用户输入：城市

您：自动填充
用户输入：州/普罗旺斯

你：是否值得自动填充几个字符？
您：自动填充邮政（zip）代码，如果可以的话（因为某些代码跨越城市）。

现在你知道为什么人们会向$$$收取费用。：）

对于街道地址，请考虑有两个部分：数字和街道名称。如果您有邮政编码，那么您可以缩小可用的街道范围，但大多数人首先输入数字部分，这是backwa

Answer 5

我真的很怀疑 - 谷歌地图API非常适合对已知地址进行地理编码，但它通常会返回适合自动完成式操作的数据。不要以非常快速地耗尽地理编码查询限制的方式击败API。

Answer 6

这很容易，但Google API示例会为您提供有关如何让地图显示输入位置的详细说明。仅限自动完成功能，您可以执行以下操作。

首先，启用Google Places API Web服务。获取API密钥。您必须在html文件的脚本标记中使用它。

<input type="text" id="location">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script>
<script src="javascripts/scripts.js"></scripts>

使用脚本文件加载自动完成类。您的scripts.js文件看起来像这样。

    // scripts.js custom js file
$(document).ready(function () {
   google.maps.event.addDomListener(window, 'load', initialize);
});

function initialize() {
    var input = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(input);
}

Answer 7

有一些很棒的库，比如select2，但它不符合我的需要。我从头开始制作一个样本，以便使用简单的输入文本。

我只使用bootstrap和JQuery。

希望它有用

`https://jsfiddle.net/yacmed/yp0xmdf5/`

Answer 8

Youtube 视频参考：https://youtu.be/WxH0J4wOnZA

HTML

<input type="text" name="myAddress" placeholder="Enter your address" value="333 Alberta Place, Prince Rupert, BC, Canada" id="myAddress"/>

Google 自动填充地址

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=[YOUR-KEY]"></script> 

<script type="text/javascript">
    var searchInput = 'myAddress';
    
        $(document).ready(function () {
            var autocomplete;
            autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
                types: ['geocode']
               
            });
        
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var near_place = autocomplete.getPlace();
            });
        });
</script>

如何使用google maps api制作自动填充地址字段？

8 个答案: