自动填充地址+ Google地图API [英] Autofill Address + Google Maps API
问题描述
我想向我的用户展示一个可输入地址的文本框。当他们输入他们的地址时，我想向用户提供他们尝试输入的地址的建议/预测。我也很关心这个地址的相关性（例如地址不是全世界的地址）。
这可能吗？我使用jQuery。
您可以使用Google Places API为地址提供自动完成功能。当选择地址时，address_components字段包含结构化地址数据（例如街道，城市，国家），并且可以很容易地转换为单独的字段。
这是一个简短的演示：
<！DOCTYPE html>
< html>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js>< / script>
< / head>
< body>
< input type =textid =addressstyle =width：500px;>< / input>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU >< /脚本>
< script>
var autocomplete = new google.maps.places.Autocomplete（$（＃address）[0]，{}）;
google.maps.event.addListener（autocomplete，'place_changed'，function（）{
var place = autocomplete.getPlace（）;
console.log（place.address_components ）;
}）;
< / script>
< / body>
< / html>
I want to present my users with a text box wherein they can type in their address. As they type their address, I want to provide the users with suggestions/predictions of what address they are trying to type. I'm also concerned about the relevance of this address (e.g. that the address is not an address halfway across the world).
Is this possible? I'm using jQuery.
You can use Google Places API to have an autocomplete for address. When address is selected, address_components field contains structured address data (e.g. street, city, country) and could be easily converted into separate fields.
Here is a short working demo:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</body>
</html>
这篇关于自动填充地址+ Google地图API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
