离我最近的汽配城 (离我最近的汽车充电桩)

script.js javascript // 获取当前位置 navigator.geolocation.getCurrentPosition(function(position) {let latitude = position.coords.latitude;let longitude = position.coords.longitude;// 向地图添加标记let map = new google.maps.Map(document.getElementById('map'), {center: {lat: latitude, lng: longitude},zoom: 15});let marker = new google.maps.Marker({position: {lat: latitude, lng: longitude},map: map,icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'});// 查找附近的汽配城let autoPartsStores = [];let request = {location: {lat: latitude, lng: longitude},radius: 1000,query: '汽配城'};let service = new google.maps.places.PlacesService(map);service.textSearch(request, function(results, status) {if (status === google.maps.places.PlacesServiceStatus.OK) {for (let i = 0; i < results.length; i++) {autoPartsStores.push({name: results[i].name,address: results[i].formatted_address,distance: results[i].distance});}// 在列表中显示汽配城let autoPartsStoreList = document.getElementById('list').querySelector('ul');for (let i = 0; i < autoPartsStores.length; i++) {let item = document.createElement('li');let link = document.createElement('a');let address = document.createElement('p');let distance = document.createElement('p');link.href = `${autoPartsStores[i].name}`;link.innerText = autoPartsStores[i].name;address.innerText = autoPartsStores[i].address;distance.innerText = `距离：${autoPartsStores[i].distance} 米`;item.appendChild(link);item.appendChild(address);item.appendChild(distance);autoPartsStoreList.appendChild(item); }}});// 查找附近的充电桩let chargingStations = [];let request = {location: {lat: latitude, lng: longitude},radius: 1000,query: '充电桩'};let service = new google.maps.places.PlacesService(map);service.textSearch(request, function(results, status) {if (status === google.maps.places.PlacesServiceStatus.OK) {for (let i = 0; i < results.length; i++) {chargingStations.push({name: results[i].name,address: results[i].formatted_address,distance: results[i].distance,availableCount: results[i].capacity});}// 在列表中显示充电桩let chargingStationList = document.getElementById('list').querySelector('ul:nth-child(2)');for (let i = 0; i < chargingStations.length; i++) {let item = document.createElement('li');let link = document.createElement('a');let address = document.createElement('p');let distance = document.createElement('p');let availableCount = document.createElement('p');link.href = `${chargingStations[i].name}`;link.innerText = chargingStations[i].name;address.innerText = chargingStations[i].address;distance.innerText = `距离：${chargingStations[i].distance} 米`;availableCount.innerText = `可用数量：${chargingStations[i].availableCount}`;item.appendChild(link);item.appendChild(address);item.appendChild(distance);item.appendChild(availableCount);chargingStationList.appendChild(item);}}}); });style.css css{box-sizing: border-box; }body {font-family: Arial, sans-serif;line-height: 1.6; }container {display: flex;justify-content: space-between; }map {width: 60%;height: 100vh; }list {width: 40%;padding: 20px; }h2 {margin-top: 0; }ul {list-style-type: none;padding: 0; }li {margin-bottom: 10px; }a {text-decoration: none;color: 000; }p {margin-top: 4px; }