script.js
javascript
const serviceSelect = document.getElementById('service');
const locationInput = document.getElementById('location');
const resultList = document.getElementById('list-results');const API_KEY = 'YOUR_API_KEY';function createListItem(name, address, phone, distance) {const li = document.createElement('li');const h3 = document.createElement('h3');const p = document.createElement('p');const a = document.createElement('a');h3.textContent = name;p.textContent = `${address} / ${phone}`;a.textContent = `距离：${distance} 米`;a.href = `${address}`;li.appendChild(h3);li.appendChild(p);li.appendChild(a);return li;
}function displayResults(data) {resultList.innerHTML = '';const shops = data.features;if (shops.length === 0) {const li = createListItem('没有找到匹配的店铺', '', '', '');li.classList.add('no-results');resultList.appendChild(li);return;}for (const shop of shops) {const li = createListItem(shop.properties.name,shop.properties.address,shop.properties.phone,shop.properties.distance);resultList.appendChild(li);}
}function searchShops() {const service = serviceSelect.value;const location = locationInput.value;if (!location) {alert('请输入您的位置。');return;}const url = `${location}&apiKey=${API_KEY}`;fetch(url).then((response) => response.json()).then((data) => {if (data.features.length === 0) {alert('无法找到您的位置。');return;}const latitude = data.features[0].properties.lat;const longitude = data.features[0].properties.lon;const url = `${service}&limit=10&apiKey=${API_KEY}&location=${latitude},${longitude}`;fetch(url).then((response) => response.json()).then((data) => displayResults(data)).catch((error) => {alert(`无法获取店铺列表：${error.message}`);});}).catch((error) => {alert(`无法获取位置信息：${error.message}`);});
}style.css
css
body {font-family: Arial, sans-serif;
}.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.form-container {margin-right: 50px;
}form {display: flex;flex-direction: column;gap: 10px;
}label {font-weight: bold;
}input,
select {padding: 5px;border: 1px solid ccc;
}.results-container {max-width: 500px;
}ul {list-style-position: inside;padding: 0;
}li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid ccc;
}h3 {margin: 0;
}a {text-decoration: none;color: blue;
}.no-results {color: red;
}
