成都游玩地图 (成都游玩地图路线)

附加样式表 (style.css) css body {font-family: Arial, sans-serif; }h1 {text-align: center; }.map-container {position: relative;width: 100%;height: 600px; }.map-container img {width: 100%;height: 100%; }.map-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%; }.map-marker {position: absolute;width: 10px;height: 10px;background-color: red;border-radius: 50%;cursor: pointer; }.legend {position: absolute;top: 10px;right: 10px;padding: 10px;background-color: fff;box-shadow: 0 0 5px ccc; }.legend h2 {margin-top: 0; }.legend ul {list-style-type: none;padding: 0; }.legend li {display: flex;align-items: center; }.legend span {width: 10px;height: 10px;background-color: red;border-radius: 50%;margin-right: 5px; }附加 JavaScript (map.js) javascript // 获取地图中的所有标记 var markers = document.querySelectorAll('.map-marker');// 循环每个标记并添加单击侦听器 for (var i = 0; i < markers.length; i++) {markers[i].addEventListener('click', function() {// 获取标记的纬度和经度var lat = this.getAttribute('data-lat');var lng = this.getAttribute('data-lng');// 使用谷歌地图 API 中心地图视图var map = new google.maps.Map(document.querySelector('.map-container'), {center: { lat: parseFloat(lat), lng: parseFloat(lng) },zoom: 15});// 创建标记并将其添加到地图中var marker = new google.maps.Marker({position: { lat: parseFloat(lat), lng: parseFloat(lng) },map: map});}); }说明：1. 上面的地图是静态的，需要在 HTML 代码内包含适当的谷歌地图 API 脚本才能使用交互式地图。 2. 您可以自定义地图上的标记图标和图例样式。 3. 单击标记后会将地图视图居中到标记的位置，并添加一个新标记。