CSS
css
body {font-family: Arial, sans-serif;
}.container {width: 100%;max-width: 600px;margin: 0 auto;
}.search-bar {display: flex;justify-content: center;align-items: center;margin-bottom: 1rem;
}address {width: 100%;padding: 0.5rem;margin-right: 0.5rem;
}search-btn {padding: 0.5rem 1rem;background-color: 008CBA;color: fff;border: none;cursor: pointer;
}.results {list-style-type: none;padding: 0;
}.repair-shop {display: flex;justify-content: space-between;align-items: center;padding: 0.5rem;margin-bottom: 0.5rem;background-color: f2f2f2;
}.repair-shop__name {font-weight: bold;
}.repair-shop__distance {font-size: 0.8rem;
}JavaScript
js
const addressInput = document.getElementById('address');
const searchBtn = document.getElementById('search-btn');
const repairShopsList = document.getElementById('repair-shops');// 获取用户的位置
const getLocation = () => {return new Promise((resolve, reject) => {navigator.geolocation.getCurrentPosition(resolve, reject);});
};// 根据地址获取纬度和经度
const getLatLongFromAddress = (address) => {return new Promise((resolve, reject) => {const geocoder = new google.maps.Geocoder();geocoder.geocode({ address }, (results, status) => {if (status === 'OK') {const { lat, lng } = results[0].geometry.location;resolve({ lat, lng });} else {reject(new Error('无法获取纬度和经度'));}});});
};// 根据纬度和经度获取附近修车店
const getRepairShops = (lat, lng) => {return new Promise((resolve, reject) => {const request = {location: { lat, lng },radius: 5000,type: 'car_repair'};const service = new google.maps.places.PlacesService(document.createElement('div'));service.nearbySearch(request, (results, status) => {if (status === 'OK') {resolve(results);} else {reject(new Error('无法获取附近修车店'));}});});
};// 显示附近修车店
const displayRepairShops = (repairShops) => {repairShops.forEach(repairShop => {const li = document.createElement('li');li.classList.add('repair-shop');const name = document.createElement('p');name.classList.add('repair-shop__name');name.textContent = repairShop.name;const distance = document.createElement('p');distance.classList.add('repair-shop__distance');distance.textContent = `${repairShop.vicinity} away`;li.appendChild(name);li.appendChild(distance);repairShopsList.appendChild(li);});
};// 搜索按钮的点击事件监听器
searchBtn.addEventListener('click', async () => {// 获取用户的地址const address = addressInput.value;// 如果地址为空，则显示错误消息if (!address) {alert('请输入您的地址');return;}// 获取地址的纬度和经度let lat, lng;try {const location = await getLatLongFromAddress(address);lat = location.lat;lng = location.lng;} catch (error) {alert(error.message);return;}// 获取附近修车店let repairShops;try {repairShops = await getRepairShops(lat, lng);} catch (error) {alert(error.message);return;}// 显示附近修车店displayRepairShops(repairShops);
});
