如何使谷歌地图API自动完成地址字段？

使用谷歌地图API和JQuery我想有一个地址字段，input时会自动完成在那里input的地址。 这是如何实现的？

Answer 1

好吧，迟到比从未好。 Google maps API v3现在提供地址自动完成function。

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

漂泊一下，但是当用户使用查找表input她的邮政编码时，自动填充美国城市/州或者CA City / Provence会比较容易。

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

1. 用户input：邮政（邮编）代码

   您填写：州，市（省，为加拿大）

2. 用户开始input：街道名称

   你：自动填充

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

   用户：input号码

完成。

以下是人们如何做到的自然：

1. 用户input：地址号码

   你：什么也不做

2. 用户开始input：街道名称

   您：自动填写，从全国各个街道的大量清单中抽取

3. 用户input：城市

   你：自动填充

4. 用户input： state / provence

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

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

---

现在你知道人们为什么要收取$$$来做到这一点。 🙂

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

Answer 3

我真的怀疑它 – 谷歌地图API是伟大的地理编码已知地址，但它通常返回适合自动完成式操作的数据。 不要以非常快地消耗您的地理编码查询限制的方式来击中API的挑战。

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

有一些很棒的库，如select2，但它不符合我的需要。 为了使用简单的input文本，我从头开始创build一个示例。

我只使用引导和JQuery。

希望这将是有用的

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

Answer 6

这很简单，但是Google API示例给出了详细的解释，说明如何让地图显示input的位置。 只有自动完成function，你可以做这样的事情。

首先，启用Google Places APInetworking服务。 获取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); }