Leaflet中使用Leaflet.fullscreen插件实现全屏效果
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet.fullscreen插件实现全屏效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
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>? 與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Leaflet中使用Leaflet.fullscreen插件实现全屏效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用MovingMark
- 下一篇： Leaflet中使用awesome-ma