L.marker 离线地图 显示隐藏 marker
时间: 2023-09-24 07:11:29 浏览: 50
要在离线地图上显示和隐藏Marker,可以使用Leaflet.js提供的L.marker对象及其方法来实现。
1. 创建Marker对象并将其添加到地图上。
```javascript
var marker = L.marker([39.9042, 116.4074]).addTo(map);
```
2. 将Marker对象的可见性设置为false,使其在地图上隐藏。
```javascript
marker.setOpacity(0); // 设置Marker透明度为0,即隐藏Marker
```
3. 在需要显示Marker的时候,将其可见性设置为true即可。
```javascript
marker.setOpacity(1); // 设置Marker透明度为1,即显示Marker
```
以下是一个完整的示例代码:
```javascript
// 初始化地图
var map = L.map('map').setView([39.9042, 116.4074], 13);
// 添加离线地图图层
L.tileLayer('tiles/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
}).addTo(map);
// 创建Marker对象
var marker = L.marker([39.9042, 116.4074]).addTo(map);
// 隐藏Marker
marker.setOpacity(0);
// 显示Marker
marker.setOpacity(1);
```
需要注意的是,在使用Leaflet.js的L.marker对象时,需要先引入Leaflet.js库。同时,如果你的Marker数量较多,建议使用Marker Cluster插件来进行聚合,以减少地图的绘制量,提高地图的性能。