这是谷歌地图搜索功能的代码片段,用于搜索特定位置。我如何制作一个无需标记即可搜索特定位置的谷歌地图搜索功能。我研究过谷歌地图搜索框,但到目前为止,我研究的大部分内容甚至在 Google Developers Website 中都有标记。找不到任何内容。
var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));
google.maps.event.addListener(searchBox,'places_changed',function() {
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (var i = 0; place= place[i]; i++) {
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(15);
});
google.maps.event.addListener(marker,'position_changed', function(){
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lat();
$('#lat').val(lat);
$('#lat').val(lat);
});
最佳答案
这是来自 Places search box 的修改示例演示如何使用 Google 地点自动完成功能的页面(删除了使用标记来标记地点的依赖项)
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('searchmap');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#searchmap {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#searchmap:focus {
border-color: #4d90fe;
}
<input id="searchmap" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete"
async defer></script>
关于javascript - 如何制作没有标记的谷歌地图地点搜索框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34239270/