西湖
雷峰塔
断桥
灵隐寺
岳王庙
太子湾公园
杭州乐园
钱塘江
style.css
css
body {font-family: Arial, sans-serif;
}map {position: relative;width: 100%;height: 600px;
}map img {
width: 100%;height: 100%;
}.marker {position: absolute;width: 20px;height: 20px;background-color: ff0000;border-radius: 50%;cursor: pointer;
}.marker:hover {background-color: 0000ff;
}legend {position: absolute;top: 0;left: 0;padding: 10px;background-color: fff;border: 1px solid 000;
}legend ul {list-style-type: none;padding: 0;margin: 0;
}legend li {display: flex;align-items: center;margin-bottom: 5px;
}legend span {width: 20px;height: 20px;margin-right: 10px;border-radius: 50%;
}script.js
javascript
const markers = document.querySelectorAll('.marker');markers.forEach(marker => {marker.addEventListener('click', () => {const location = marker.getAttribute('data-location');alert(`你点击了 ${location} 景点。`);});
});
