搜索结果
自定义 CSS 样式
css
/ 主体样式 /
body {font-family: Arial, sans-serif;
}/ 标题样式 /
h1 {font-size: 2rem;
}/ 搜索表单样式 /
form {display: flex;align-items: center;margin-bottom: 1rem;
}location {width: 200px;padding: 0.5rem;border: 1px solid ccc;border-radius: 5px;
}button {padding: 0.5rem 1rem;border: 1px solid 000;border-radius: 5px;background-color: 000;color: fff;cursor: pointer;
}/ 搜索结果样式 /
results {background-color: f5f5f5;padding: 1rem;
}h2 {font-size: 1.5rem;
}/ 充电桩列表样式 /
ul {list-style-type: none;padding: 0;
}li {display: flex;justify-content: space-between;padding: 0.5rem 0;border-bottom: 1px solid ccc;
}.name {font-weight: bold;
}.address {font-style: italic;
}.distance {text-align: right;
}自定义 JavaScript 脚本
javascript
// 使用 Google Maps API 搜索附近的充电桩
function searchChargingStations(location) {let request = {location: location,radius: 5000, // 以米为单位的搜索半径types: ["charging_station"]};let service = new google.maps.places.PlacesService(map);service.nearbySearch(request, function(results, status) {if (status === google.maps.places.PlacesServiceStatus.OK) {showResults(results);} else {alert("Error: " + status);}});
}// 将搜索结果显示在“results”div中
function showResults(results) {let output = "
";for (let i = 0; i < results.length; i++) {let result = results[i];output += "
-
";output += "
" + result.name + "
";output += "
" + result.vicinity + "
";// 计算与给定位置的距离let distance = calculateDistance(result.geometry.location, location);output += "
" + distance + " 米
";output += "
";}output += "
";document.getElementById("results").innerHTML = output;
}// 计算两个地点之间的距离（以米为单位）
function calculateDistance(location1, location2) {let lat1
