使用 Google Maps API 和 JQuery 我想要一个地址字段，在输入时会自动完成在其中输入的地址。如何实现这一目标？
嗯，迟到总比不到好。 Google 地图 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
这很简单，但 Google API 示例为您提供了详细说明，说明如何让地图显示输入的位置。对于仅自动完成功能，您可以执行类似的操作。
首先，启用 Google Places API Web 服务。获取 API 密钥。您必须在 html 文件的 script 标签中使用它。
<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>
使用脚本文件加载自动完成类。您的 script.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);
}
就像其他人提到的那样，Google Places Autocomplete API 缺少一些重要功能。举个例子，谷歌不会验证街道号码的真实性，也不会将其转换为标准化格式。因此，用户有责任正确输入地址的该部分。
Google 也不会预测邮政信箱或公寓号码。因此，如果您使用他们的 API 进行运输、地址清理或数据治理，您可能需要一个能够验证建筑物编号、自动完成单元编号并标准化信息的 API。
完全披露，我为 SmartyStreets
工作下面我拆分了格式化地址的所有详细信息，例如城市、州、国家和邮政编码。
因此，当您开始输入街道名称并选择任何选项时，街道名称将覆盖街道字段，城市名称将覆盖城市字段，所有其他字段（例如州、国家/地区和邮政编码）将自动填充。
<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;
});
});
有点漂移，但当用户使用查找表输入邮政编码时，自动填充美国城市/州或加利福尼亚城市/普罗旺斯相对容易。
如果你可以强迫人们屈服于你的意志，你可以这样做：
用户输入：邮政编码
您填写：州、市（加拿大省）
用户开始输入：街道名称
您：自动填充
您显示：允许的地址号码范围
用户：输入号码
完成。
人们这样做是很自然的：
用户输入：地址号码
你：什么都不做
用户开始输入：街道名称
你：自动填充，从全国每条街道的大量列表中绘制
用户输入：城市
您：自动填充
用户输入：州/普罗旺斯
你：值得自动填充几个字符吗？
您： 如果可以的话，自动填充邮政编码（因为有些代码跨越城市）。
现在你知道为什么人们要收费 $$$ 来做这件事了。 :)
对于街道地址，请考虑有两部分：数字和街道名称。如果你有邮政编码，那么你可以缩小可用的街道范围，但大多数人首先输入数字部分，这是背面
我真的很怀疑——谷歌地图 API 非常适合对已知地址进行地理编码，但它通常返回适合自动完成式操作的数据。不要介意不使用 API 会很快耗尽地理编码查询限制的挑战。
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>
有一些很棒的库，例如 select2，但它不符合我的需要。 我从头开始制作了一个示例，以便使用简单的输入文本。
我只使用 bootstrap 和 JQuery，希望它有用：示例
HTML：
<div class="form-group col-md-12">
<label for="address">Address</label>
<input type="text" class="form-control" id="address">
</div>
<div class="form-group">
<div class="col-md-4">
<label for="number">number</label>
<input type="text" class="form-control" id="number">
</div>
<div class="col-md-8">
<label for="street">street</label>
<input type="text" class="form-control" id="street">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="zip">zip</label>
<input type="text" class="form-control" id="zip">
</div>
<div class="col-md-8">
<label for="town">town</label>
<input type="text" class="form-control" id="town">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="department">Department</label>
<input type="text" class="form-control" id="department">
</div>
<div class="col-md-4">
<label for="region">Region</label>
<input type="text" class="form-control" id="region">
</div>
<div class="col-md-4">
<label for="country">Country</label>
<input type="text" class="form-control" id="country">
</div>
</div>
JS：
$("input#address").suggest({
label : "Adresse complete",
street_number_input : {
id : "number",
label : "Numero de la rue"
},
street_name_input : {
id : "street",
label : "Nom de la rue"
},
zip_input : {
id : "zip",
label : "Code postal"
},
town_input : {
id : "town",
label : "Ville"
},
department_input : {
id : "department",
label : "Departement"
},
region_input : {
id : "region",
label : "Region"
},
country_input : {
id : "country",
label : "Pays"
}
});