场景

Vue+Leaflet实现加载OSM显示地图：

Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上，怎样实现地图全屏效果。

注：

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

实现

1、插件地址

https://github.com/Leaflet/Leaflet.fullscreen

2、下载源码，引入核心js文件，Leaflet.fullscreen.js，以及全屏按钮所需的照片资源

修改样式css文件中图片的路径

3、新建地图时添加全屏插件

        var map = L.map('map', {fullscreenControl: {pseudoFullscreen: false}}).setView([36.09, 120.35], 13);

4、完整示例代码


<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet实现全屏</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 500px;height: 500px;overflow: hidden;}.leaflet-control-fullscreen a {background: #fff url(./icon/fullscreen.png) no-repeat 0 0;background-size: 26px 52px;}.leaflet-touch .leaflet-control-fullscreen a {background-position: 2px 2px;}.leaflet-fullscreen-on .leaflet-control-fullscreen a {background-position: 0 -26px;}.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {background-position: 2px -24px;}/* Do not combine these two rules; IE will break. */.leaflet-container:-webkit-full-screen {width: 100% !important;height: 100% !important;}.leaflet-container.leaflet-fullscreen-on {width: 100% !important;height: 100% !important;}.leaflet-pseudo-fullscreen {position: fixed !important;width: 100% !important;height: 100% !important;top: 0 !important;left: 0 !important;z-index: 99999;}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {.leaflet-control-fullscreen a {background-image: url(./icon/fullscreen@2x.png);}}</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.fullscreen.js"></script><script type="text/javascript">var map = L.map('map', {fullscreenControl: {pseudoFullscreen: false}}).setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);</script>
</body></html>

Leaflet中使用Leaflet.fullscreen插件实现全屏效果相关推荐

Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
安防互联网摄像头海康大华硬盘录像机视频流媒体服务器EasyNVR在layer弹出层中使用video标签无法最大化全屏播放问题解决
诞生背景众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp.rtsp.hls.flv协议转换,并提供推流服务,可以将拉到的网络摄像头直接转发到流媒体服务器 ...
html中背景图按比例缩放全屏显示
html中背景图按比例缩放全屏显示,核心代码如下div: <body style="height: 100%; margin: 0;" onload="create ...
如何实现浏览器的全屏效果
浏览器中自带全屏功能 document.documentElement.webkitRequestFullScreen(),不过有兼容性问题,所以改用插件使用screenFull插件来提供全屏功能 ...
js如何设置浏览器全屏效果？
现在很多网页游戏进入游戏界面后都是全屏显示的效果,很多人问我这个要怎么实现,其实这个只要调用Fullscreen API就可以实现了作为一个比较新的 API,目前只有 Safari.Chrome 和 ...
iOS视频播放全屏效果实现
概述最近在做有关音视频的项目,项目中涉及到全屏播放切换的问题,最近研究了一下.在此做个记录,实现全屏效果我目前能够用两种方法实现,一种是让App需要进行全屏的页面随着设备进行旋转,另外一种是把需要全 ...
android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的再是模仿的先说下实现原理,再一步步分析这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
html实现全屏效果原理,HTML5 实现全屏效果
HTML5 实现全屏效果点击进入全屏和点击退出全屏方法: //进入全屏 function requestFullScreen() { var de = document.documentElemen ...
Android学习之Android 5.0分享动画实现微信点击全屏效果
Android5.0过渡动画,请看 http://blog.csdn.net/qq_16131393/article/details/51112772 今天用分享动画实现微信点击全屏效果本文源代码下 ...

Leaflet中使用Leaflet.fullscreen插件实现全屏效果

场景

实现

Leaflet中使用Leaflet.fullscreen插件实现全屏效果相关推荐

最新文章

热门文章