http://www.mcdkf.com/anhui_map.jpg,这个是我准备的安徽省的地图
时间: 2024-02-03 16:03:45 浏览: 86
安徽地图anhui.shp
非常感谢提供安徽省的地图。你可以使用该地图作为背景,并在上面添加交互元素。以下是一个示例代码,可将提供的地图作为 SVG 背景,并实现点击地市时弹出弹窗的功能:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 半透明悬浮框样式 */
#popup {
display: none;
position: fixed;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div style="position: relative;">
<img src="http://www.mcdkf.com/anhui_map.jpg" alt="安徽省地图" width="600" height="400">
<!-- 安徽省地市地图 -->
<svg id="anhui" width="600" height="400" style="position: absolute; top: 0; left: 0;">
<path d="M 100 200 L 200 100 L 300 200 L 200 300 Z" fill="#ccc"></path>
<!-- 其他地市地图 -->
<!-- ... -->
</svg>
</div>
<!-- 弹窗 -->
<div id="popup">
<h2>地市名称</h2>
<table>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 可以添加更多行 -->
</table>
</div>
<script>
// 获取地市元素
const anhui = document.getElementById('anhui');
// 获取弹窗元素
const popup = document.getElementById('popup');
// 点击地市时弹出弹窗
anhui.addEventListener('click', function() {
popup.style.display = 'block';
});
// 点击页面其他地方自动关闭弹窗
window.addEventListener('click', function(event) {
if (event.target != popup && event.target != anhui) {
popup.style.display = 'none';
}
});
</script>
</body>
</html>
```
请将提供的地图图片保存到本地,并将图片路径替换为 `<img>` 标签的 `src` 属性中的对应路径。然后,你可以根据需要修改地图的样式和具体内容。当点击地市时,弹窗会显示,并且点击页面其他地方会自动关闭弹窗。弹窗中的列表是一个简单的示例,你可以根据需要进行修改和扩展。
阅读全文