自动填充地址 + Google Maps API
Posted
技术标签:
【中文标题】自动填充地址 + Google Maps API【英文标题】:Autofill Address + Google Maps API 【发布时间】:2011-05-02 22:42:25 【问题描述】:我想向我的用户展示一个文本框,他们可以在其中输入地址。当他们输入地址时,我想为用户提供他们尝试输入的地址的建议/预测。我还担心此地址的相关性(例如,该地址不是世界另一端的地址)。
这可能吗?我正在使用 jQuery。
【问题讨论】:
这可能不是 jquery 问题。您需要输入一些第三方供应商,他们在运行时为您提供地址,例如 QAS 服务。 不知道有没有免费的provider,我们在我们公司实现了,用的是QAS。 qas.com/home.htm ,检查这是否是您要实现的。 是时候更改您的用户名了吗? 【参考方案1】:您可以使用 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="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>
【讨论】:
有没有办法让它自动填充不同的输入?因此,如果您从输入第一行开始,它会为您提供地址选项,当您单击它时,它会自动在多个输入中填充地址? 如何在地图上显示选定的位置,请帮帮我 哇,这非常简单明了,谢谢!【参考方案2】:看看 address-suggestion 和 the demo。它是用 jQuery 和Google Maps geocode API 实现的。
【讨论】:
【参考方案3】:https://github.com/ubilabs/geocomplete 应该适合你。 如有必要,您还可以显示地图。
如果您在不显示地图的情况下使用插件,则必须在文本字段下显示“由 Google 提供支持”徽标。
【讨论】:
【参考方案4】:@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>
【讨论】:
【参考方案5】:您必须使用 API 密钥。
见参考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>
【讨论】:
以上是关于自动填充地址 + Google Maps API的主要内容,如果未能解决你的问题,请参考以下文章