script.js
javascript
// 查找 DOM 元素
const locationInput = document.getElementById('location');
const serviceSelect = document.getElementById('service');
const resultsList = document.getElementById('results');// 创建 Google Maps API 服务对象
const map = new google.maps.Map(document.getElementById('map'), {center: { lat: -33.8688, lng: 151.2195 },zoom: 10
});// 事件侦听器函数
const search = (e) => {e.preventDefault();// 获取用户输入const location = locationInput.value;const service = serviceSelect.value;// 创建请求const request = {location: location,query: service};// 发送请求const service = new google.maps.places.PlacesService(map);service.textSearch(request, (results, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {// 清除以前的搜索结果resultsList.innerHTML = '';// 循环遍历结果并创建列表项results.forEach((result) => {const listItem = document.createElement('li');const name = document.createElement('h3');name.textContent = result.name;const address = document.createElement('p');address.textContent = result.formatted_address;const phone = document.createElement('p');phone.textContent = result.formatted_phone_number;const website = document.createElement('a');website.href = result.website;website.textContent = '网站';listItem.appendChild(name);listItem.appendChild(address);listItem.appendChild(phone);listItem.appendChild(website);resultsList.appendChild(listItem);});} else {alert('没有找到匹配项！');}});
};// 添加事件侦听器
document.querySelector('form').addEventListener('submit', search);
