js
// JavaScript 代码const locationInput = document.getElementById('location');
const serviceSelect = document.getElementById('service');
const radiusInput = document.getElementById('radius');
const resultsList = document.getElementById('results');// 创建 Google 地图服务
const map = new google.maps.Map(document.getElementById('map'), {center: { lat: 40.7127, lng: -74.0059 },zoom: 13
});// 创建信息窗口
const infoWindow = new google.maps.InfoWindow();// 添加事件侦听器以处理表单提交
document.forms[0].addEventListener('submit', (e) => {e.preventDefault();// 清除以前的搜索结果resultsList.innerHTML = '';// 获取用户输入const location = locationInput.value;const service = serviceSelect.value;const radius = radiusInput.value;// 创建服务请求const request = {location: location,radius: radius,types: ['car_repair']};// 执行服务请求const service = new google.maps.places.PlacesService(map);service.nearbySearch(request, (results, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {// 遍历结果并显示在列表中for (let i = 0; i < results.length; i++) {const place = results[i];// 创建列表项const listItem = document.createElement('li');const listItemLink = document.createElement('a');listItemLink.href = place.url;listItemLink.textContent = place.name;const listItemAddress = document.createElement('p');listItemAddress.textContent = place.vicinity;// 创建标记const marker = new google.maps.Marker({map: map,position: place.geometry.location});// 添加事件侦听器以显示信息窗口marker.addListener('click', () => {
infoWindow.setPosition(place.geometry.location);infoWindow.setContent(place.name);infoWindow.open(map, marker);});// 将列表项添加到列表中listItem.appendChild(listItemLink);listItem.appendChild(listItemAddress);resultsList.appendChild(listItem);}} else {// 处理错误console.log('请求附近的地方时出错：', status);}});
});
