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

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

这很简单，但 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 3

有点漂移，但是当用户使用查找表输入邮政编码时，自动填充美国城市/州或加利福尼亚州城市/普罗旺斯相对容易。

如果你可以强迫人们屈服于你的意志，你可以这样做：

1. 用户输入：邮政编码

   您填写：州、城市（加拿大的省）

2. 用户开始输入：街道名称

   你：自动填充

3. 您显示：允许的地址号码范围

   用户：输入号码

完毕。

人们这样做是很自然的：

1. 用户输入：地址号码

   你：什么也不做

2. 用户开始输入：街道名称

   你：自动填充，从全国每条街道的大量列表中绘制

3. 用户输入：城市

   你：自动填充

4. 用户输入：州/普罗旺斯

   你：值得自动填充几个字符吗？

5. 您：如果可以的话，自动填充邮政编码（因为有些代码跨越城市）。

现在你知道为什么人们要花$$$来做这件事了。:)

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

Answer 4

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 5

就像其他人提到的那样，Google Places Autocomplete API 缺少一些重要功能。举个例子，谷歌不会验证街道号码是真实的，他们也不会把它变成一个标准化的格式。因此，用户有责任正确输入该地址部分。

谷歌也不会预测邮政信箱或公寓号码。因此，如果您使用他们的 API 进行运输、地址清理或数据治理，您可能需要一个能够验证建筑编号、自动完成单元编号和标准化信息的 API。

完全披露，我为SmartyStreets工作