如何添加Google Maps自动完成搜索框？
如何添加Google Maps自动完成搜索框？
提问于 2012-12-04 02:48:46
我正在尝试添加一个谷歌自动完成搜索框到一个网站，以便用户可以搜索一个地址尽可能容易。
我的问题是，我已经在这里以及谷歌地图Javascript API v3上看到了许多关于这一点的问题和一些教程，但它们都将自动完成功能与嵌入式谷歌地图上的地图捆绑在一起。
我不需要可视化地映射位置，我现在只需要自动完成框，不幸的是，我不能确定API的哪些部分与此相关，并且我看过的每个示例都包含大量用于映射的JS。
我如何才能只添加自动完成输入功能？
回答 10
Stack Overflow用户
回答已采纳
发布于 2013-05-09 06:38:46
这段代码的很大一部分可以去掉。
HTML摘录：
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>
<body>
...
<input id="searchTextField" type="text" size="50">
...
</body>Javascript：
function initialize() {
var input = document.getElementById('searchTextField');
new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);Stack Overflow用户
发布于 2018-03-13 14:30:59
要获得纬度和经度，可以使用以下简单的代码：
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script>
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
document.getElementById('city2').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
</body>
</html>Stack Overflow用户
发布于 2015-11-07 05:11:43
只需复制并粘贴下面的相同代码。
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/jsvv=3.exp&sensor=false&libraries=places"></script>
</head>
<body>
<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">
<script>
function init() {
var input = document.getElementById('locationTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</body>
</html>可以从这个链接中找到格式良好的代码。http://jon.kim/how-to-add-google-maps-autocomplete-search-box/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13689705
复制相关文章
相似问题