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

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

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

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

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

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

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi


关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

1、插件地址

https://github.com/davidchouse/Leaflet.NavBar

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

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

"stylesheet" href="./css/Leaflet.NavBar.css" />

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

3、控件使用

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

4、完整代码

"en">

"UTF-8">

"stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
"stylesheet" href="./css/Leaflet.NavBar.css" />

博客园：

https://www.cnblogs.com/badaoliumangqizhi/

关注公众号

霸道的程序猿

获取编程相关电子书、教程推送与免费下载。