css
/ 通用样式 /
body{font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;
}h1 {font-size: 1.5em;margin: 0;
}p {font-size: 1em;margin: 0;
}/ 标头样式 /
header {background-color: 333;padding: 10px;
}h1 {color: fff;
}/ 主体样式 /
main {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;margin-top: 10px;
}map {width: 600px;height: 400px;margin: 0 auto;
}search-form {width: 300px;margin: 0 auto;
}search-input {width: 200px;padding: 5px;
}search-button {padding: 5px;
}/ 页脚样式 /
footer {background-color: 333;padding: 5px;text-align: center;
}p {color: fff;
}
javascript
// Google Maps API 脚本
const googleMapsApiKey = "YOUR_GOOGLE_MAPS_API_KEY";// 地图选项
const mapOptions = {center: { lat: 40.7127, lng: -74.0059 },zoom: 13,
};// 创建地图
const map = new google.maps.Map(document.getElementById("map"), mapOptions);// 添加标记
const markers = [];// 搜索输入框事件监听器
document.getElementById("search-button").addEventListener("click", (e) => {e.preventDefault();const searchTerm = document.getElementById("search-input").value;// 使用 Google Places API 搜索修车点const request = {query: searchTerm,fields: ["name", "geometry"],};const service = new google.maps.places.PlacesService(map);service.textSearch(request, (results, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {// 清除现有的标记for (let i = 0; i < markers.length; i++) {markers[i].setMap(null);}markers.length = 0;// 添加新标记for (let i = 0; i < results.length; i++){const marker = new google.maps.Marker({position: results[i].geometry.location,map: map,title: results[i].name,});markers.push(marker);}// 更新地图边界const bounds = new google.maps.LatLngBounds();for (let i = 0; i < markers.length; i++) {bounds.extend(markers[i].getPosition());}map.fitBounds(bounds);}});
});
