宽窄巷子
锦里
天府广场
人民公园
武侯祠
杜甫草堂
成都大熊猫繁育研究基地
青城山
都江堰
附加样式表 (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. 单击标记后会将地图视图居中到标记的位置,并添加一个新标记。