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

Using Google Maps API and JQuery I would like to have an Address field that when typing it will autocomplete the address entered there. How this could be achieved?

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

6 个解决方案

#1

Well, better late than never. Google maps API v3 now provides address autocompletion.

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

API docs are here: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

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

A good example is here: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

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

#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;            
    });
});

#3

Drifting a bit, but it would be relatively easy to autofill the US City/State or CA City/Provence when the user enters her postal code using a lookup table.

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

Here's how you could do it if you could force people to bend to your will:

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

User enters: postal (zip) code

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

You fill: state, city (province, for Canada)

你填写：州，市（省，加拿大）
User starts to enter: streetname

用户开始输入：streetname

You: autofill

你：自动填充
You display: a range of allowed address numbers

您显示：一系列允许的地址编号

User: enters the number

用户：输入号码

Done.

完成。

Here's how it is natural for people to do it:

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

User enters: address number

用户输入：地址编号

You: do nothing

你：什么都不做
User starts to enter: street name

用户开始输入：街道名称

You: autofill, drawing from a massive list of every street in the country

你：自动填充，从该国每条街道的大量清单中抽取
User enters: city

用户输入：city

You: autofill

你：自动填充
User enters: state/provence

用户输入：州/普罗旺斯

You: is it worth autofilling a few chars?

你：是否值得自动填充几个字符？
You: autofill postal (zip) code, if you can (because some codes straddle cities).

你：自动填写邮政（zip）代码，如果可以的话（因为有些代码跨越城市）。

Now you know why people charge $$$ to do this. :)

现在你知道为什么人们会收取$$$来做这件事。 :)

For the street address, consider there are two parts: numeric and streetname. If you have the zip code, then you can narrow down the available streets, but most people enter the numeric part first, which is backwa

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

#4

I really doubt it--google maps API is great for geocoding known addresses, but it generally return data that is suitable for autocomplete-style operations. Nevermind the challenge of not hitting the API in such a way as to eat up your geocoding query limit very quickly.

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

#5

It is easy, but the Google API examples give you detailed explanation with how you can get the map to display the entered location. For only autocomplete feature, you can do something like this.

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

First, enable Google Places API Web Service. Get the API key. You will have to use it in the script tag in html file.

首先，启用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>

Use script file to load the autocomplete class. Your scripts.js file will look something like this.

使用脚本文件加载自动完成类。你的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);
}

#6

There are some awesome libraries such as select2, but it doesn't match my need. I've made a sample from scratch in order to use a simple input text.

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

I only use bootstrap and JQuery.

我只使用bootstrap和JQuery。

Hope it'll be usefull

希望它会有用

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

#1