请输入您的位置,以查找附近的宾馆:
<script> // Google Maps API 密钥const API_KEY = 'AIzaSyA1IY2-oy9fuYrZ3TA6zlx6VV668q17F8A';// 创建地图const map = new google.maps.Map(document.getElementById('map'), {center: {lat: -34.397, lng: 150.644},zoom: 12});// 标记用户位置const userMarker = new google.maps.Marker({position: {lat: -34.397, lng: 150.644},map: map,title: '您的位置'});// 查找宾馆document.querySelector('form').addEventListener('submit', (event) => {event.preventDefault();const location = document.getElementById('location').value;const request = {query: '宾馆 ' + location,fields: ['name', 'geometry'],};const service = new google.maps.places.PlacesService(map);service.findPlaceFromQuery(request, (results, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {clearResults();for (let i = 0; i < results.length; i++) {createResult(results[i]);}map.setCenter(results[0].geometry.location);}});});// 清除结果const clearResults = () => {document.getElementById('results').innerHTML = '';};// 创建结果const createResult = (place) => {const result = document.createElement('div');result.classList.add('result');const name = document.createElement('h3');name.textContent = place.name;const address = document.createElement('p');address.textContent = place.vicinity;const distance = document.createElement('p');const distanceService = new google.maps.DistanceMatrixService();distanceService.getDistanceMatrix({origins: [userMarker.getPosition()],destinations: [place.geometry.location],travelMode: 'DRIVING'}, (response, status) => {if (status === 'OK') {distance.textContent = `距离:${response.rows[0].elements[0].distance.text}`;}});const bookButton = document.createElement('a');bookButton.classList.add('book-button');bookButton.textContent = '预订';bookButton.href = `宾馆 ${place.name} ${place.vicinity}`;result.appendChild(name);result.appendChild(address);result.appendChild(distance);result.appendChild(bookButton);document.getElementById('results').appendChild(result);};// 加载 Google Maps APIconst script = document.createElement('script');script.src = `${API_KEY}&libraries=places`;document.head.appendChild(script); script>