请输入您的地址或邮政编码,以搜索附近的招待所。
<script> // 初始化地图var map = new google.maps.Map(document.getElementById('map'), {center: {lat: -33.8688, lng: 151.2195},zoom: 15});// 搜索表单提交处理程序document.getElementById('search-form').addEventListener('submit', function(e) {e.preventDefault();// 获取地址或邮政编码var address = document.getElementById('address').value;// 使用谷歌地理由地址获取经纬度var geocoder = new google.maps.Geocoder();geocoder.geocode({'address': address}, function(results, status) {if (status == google.maps.GeocoderStatus.OK) {var location = results[0].geometry.location;// 以输入的地址为中心更新地图map.setCenter(location);// 搜索附近招待所var request = {location: location,radius: 500, // 搜索半径为500米types: ['lodging']};var service = new google.maps.places.PlacesService(map);service.nearbySearch(request, function(results, status) {if (status == google.maps.places.PlacesServiceStatus.OK) {// 清除之前的搜索结果document.getElementById('results').innerHTML = '';// 将搜索结果显示在地图上for (var i = 0; i < results.length; i++) {var place = results[i];var marker = new google.maps.Marker({position: place.geometry.location,map: map,title: place.name});// 创建搜索结果列表项var resultItem = document.createElement('div');resultItem.classList.add('result');// 添加招待所名称var resultTitle = document.createElement('h3');resultTitle.classList.add('result-title');resultTitle.innerText = place.name;resultItem.appendChild(resultTitle);// 添加招待所地址var resultAddress = document.createElement('p');resultAddress.classList.add('result-address');resultAddress.innerText = place.vicinity;resultItem.appendChild(resultAddress);// 添加搜索结果列表项到列表中document.getElementById('results').appendChild(resultItem);}}});}});}); script>