Dom*_*Dom 49 javascript autocomplete google-maps-api-3
我正在尝试将Google自动填充搜索框添加到网站,以便用户可以尽可能轻松地搜索地址.
我的问题是,我在这里看了很多问题以及关于这个和一些教程的谷歌地图Javascript API v3,但他们都将自动完成功能捆绑在一起,并将其映射到嵌入式谷歌地图上.
我不需要直观地映射位置,我现在只需要自动完成框,遗憾的是我无法确定API的哪些部分与此相关,我所看到的每个示例都包含大量用于映射的JS.
我怎样才能添加自动完成输入功能？
小智 97
可以消除该代码的很大一部分.
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);
您可以在http://www.redwoodtransit.org上看到一个示例.
要获得纬度和经度，也可以使用以下简单代码：
<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>
小智 7
所以我一直在研究这个，看来你需要激活地点和 js 地图 api。然后使用以下内容：
HTML：
<input id="searchTextField" type="text" size="50">
<input id="address" name="address" value='' type="hidden" placeholder="">
JS：
<script>
function initMap() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
document.getElementById("address").value = JSON.stringify(place.address_components);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
小智 6
只需复制并粘贴下面的相同代码即可.
<!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/
要立即使用Google Maps / Places API，您需要使用API密钥。因此，API URL将从
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
至
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
| 归档时间： |
|
| 查看次数： |
136799 次 |
| 最近记录： |