jQuery 自动填充地址 + Google Maps API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4061125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autofill Address + Google Maps API
提问by StackOverflowNewbie
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.
这可能吗？我正在使用 jQuery。
回答by Maksym Kozlenko
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.
您可以使用 Google Places API 来自动完成地址。选择地址后，address_components 字段包含结构化地址数据（例如街道、城市、国家/地区）并且可以轻松转换为单独的字段。
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>
回答by user471245
Take a look at address-suggestion, and the demo. It's implemented with jQuery and Google Mapsgeocode API.
看看address-suggestion和demo。它是使用 jQuery 和Google Maps地理编码 API 实现的。
回答by DreifGenov
https://github.com/ubilabs/geocompleteshould work for you. You will also be able to show a map, if necessary.
https://github.com/ubilabs/geocomplete应该适合你。如有必要，您还可以显示地图。
If you use the plugin without showing a map you must display the "powered by Google" logo under the text field.
如果您在不显示地图的情况下使用插件，则必须在文本字段下显示“由 Google 提供支持”徽标。
回答by Anand Singh
Running version of @Maksym Kozlenko answer For those how want to see this in action.
运行版本的@Maksym Kozlenko 回答对于那些希望看到这一点的人。
<!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>回答by Mihai Alexandru-Ionut
You have to use an API key.
您必须使用 API 密钥。
See reference here.
<!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="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIWSqJ5-3D-UviE0ZLO4U6AjhVcn58y4g&libraries=places&callback=initMap"></script>
<script>
function initMap(){
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>
