使用leaflet点击按钮显示所有的标记点,再点击按钮隐藏所有标记点,完整代码
时间: 2024-05-25 09:19:22 浏览: 15
我可以回答这个问题。以下是一个简单的示例代码,可以实现在点击按钮时显示或隐藏所有标记点:
```html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Show/Hide Markers Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-SYUZ+6xJj6o5P6v5c5w5O5FmJNzVpIv9Z9zW8bQc1mI7A+TxKmJwW8GnT3q7rGdQ2XZtVnZxgN+p7VAmDvA/ow==" crossorigin=""/>
<style>
#map {
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="toggleMarkers">Toggle Markers</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js" integrity="sha512-xGvYXmU6+jDWd6jIGaEtF5v5yn5wSMljhSJiL35zjgEPvNcWnFpEi3b4lJ4Qv+1NGw/Qu6bBQhbEzL9XoU6fBQ==" crossorigin=""></script>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
var markers = [
L.marker([51.5, -0.09]),
L.marker([51.505, -0.08]),
L.marker([51.51, -0.1])
];
function toggleMarkers() {
for (var i = 0; i < markers.length; i++) {
if (map.hasLayer(markers[i])) {
map.removeLayer(markers[i]);
} else {
map.addLayer(markers[i]);
}
}
}
document.getElementById('toggleMarkers').addEventListener('click', toggleMarkers);
</script>
</body>
</html>
```
这个示例代码使用 Leaflet 库创建了一个地图,并在地图上添加了三个标记点。点击 "Toggle Markers" 按钮时,会循环遍历标记点数组,如果标记点在地图上已经存在,则移除该标记点,否则添加该标记点。这样就可以实现显示或隐藏所有标记点的功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)