最近修车地点查询 (最近修车地点有哪些)

javascript // script.js const map = L.map('map').setView([40.7128, -74.0060], 13); const results = document.getElementById('results');L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19 }).addTo(map);const myIcon = L.icon({iconUrl: 'marker-icon.png',iconSize: [25, 41],iconAnchor: [12, 41] });// 从服务器获取修车地点数据 fetch('/api/repair-shops').then(response => response.json()).then(data => {// 对返回的数据进行循环遍历data.forEach(shop => {const marker = L.marker([shop.latitude, shop.longitude], {icon: myIcon}).addTo(map);// 为标记添加弹出框marker.bindPopup(` ${shop.name}
${shop.address}
${shop.phone}`).openPopup();// 为结果列表添加新项const newLi = document.createElement('li');const newH2 = document.createElement('h2');const newPAddress = document.createElement('p');const newPPhone = document.createElement('p');newH2.textContent = shop.name;newPAddress.textContent = shop.address;newPPhone.textContent = shop.phone;newLi.appendChild(newH2);newLi.appendChild(newPAddress);newLi.appendChild(newPPhone);results.appendChild(newLi);});}).catch(error => {console.error('Error fetching data: ', error);alert('抱歉，无法获取修车地点信息。请稍后再试。');});注释：该 HTML 文件创建了页面框架、地图容器和结果列表容器。`script.js` 文件负责从服务器获取修车地点数据、在地图上添加标记、创建弹出框并更新结果列表。`/api/repair-shops` 是服务器端端点，用于获取修车地点数据。`L.marker` 和 `L.icon` 来自 Leaflet JavaScript 库，用于在地图上创建标记。`fetch()` API 用于从服务器获取数据。`forEach` 方法用于迭代数据并创建标记和列表项。