场景

Leaflet快速入门与加载OSM显示地图：

Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet教程

在上面实现加载地图显示的基础上。

导航组件主要用于恢复地图的视图状态，通过插件Leaflet.NavBar插件实现导航控件的加载显示。

控件中的左箭头表示返回上一次的视图状态

右箭头表示返回下一次的视图状态

home键表示直接返回最初的视图状态

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、插件地址

GitHub - davidchouse/Leaflet.NavBar: Simple navigation toolbar for Leaflet.

将插件代码下载，获取到css、js和img文件

2、页面中引入js、css并修改css中img路径

<link rel="stylesheet" href="./css/Leaflet.NavBar.css" /><script type="text/javascript" src="./js/Leaflet.NavBar.js"></script>

修改css中img的路径，获取将img文件夹放在默认的路径下

3、控件使用

        //定义一个导航组件var navbar = L.control.navbar();//将导航组件添加进地图map.addControl(navbar);

4、完整代码


<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet-NavBar实现导航控件</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><link rel="stylesheet" href="./css/Leaflet.NavBar.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>
</head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/Leaflet.NavBar.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//定义一个导航组件var navbar = L.control.navbar();//将导航组件添加进地图map.addControl(navbar);</script>
</body></html>

Leaflet中使用NavBar插件实现导航(前进后退)效果相关推荐

Leaflet中使用leaflet-cion-pulse插件实现波动的图标效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件实现波动的图标效 ...
Leaflet中通过leaflet-measure插件实现测距测面效果
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet中原生方式实现测量面积: Leaflet中原生方式 ...
Leaflet中使用Leaflet-echarts3插件实现航班航线动态模拟
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图(带炫光特效)
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件Moving ...
Leaflet中使用Leaflet-MiniMap插件实现小地图效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件实现小地图效果如 ...
Leaflet中使用leaflet-sidebar插件实现侧边栏效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件实现地图侧边栏效 ...
Leaflet中使用leaflet-search插件实现搜索定位效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件实现搜索定位效果 ...
Leaflet中使用awesome-markers插件显示带图标的marker
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,实现Marker上带图标 ...

Leaflet中使用NavBar插件实现导航(前进后退)效果

场景

实现

Leaflet中使用NavBar插件实现导航(前进后退)效果相关推荐

最新文章

热门文章