我正在尝试添加一个谷歌自动完成搜索框到一个网站,以便用户可以搜索一个地址尽可能容易。
我的问题是,我已经在这里以及谷歌地图Javascript API v3上看到了许多关于这一点的问题和一些教程,但它们都将自动完成功能与嵌入式谷歌地图上的地图捆绑在一起。
我不需要可视化地映射位置,我现在只需要自动完成框,不幸的是,我不能确定API的哪些部分与此相关,并且我看过的每个示例都包含大量用于映射的JS。
我如何才能只添加自动完成输入功能?
发布于 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);
发布于 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>
发布于 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/
https://stackoverflow.com/questions/13689705
复制相似问题