场景
Leaflet快速入门与加载OSM显示地图：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
在上面加载地图显示的基础上。有时会借助视频展示地物的信息。
比如在某位置添加一个图片标注，点击该标注时播放视频。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、Leaflet提供了L.VideoOverlay对象，声明视频文件路径和视频添加的地图范围
var videolayer; //视频文件路径 var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm'; //视频添加的地图范围 var videoBounds = [[36.07, 120.33], [36.11, 120.37]];
2、添加播放和取消播放的图标和图片标注
//添加播放图标 var playIcon = L.icon({ //图标地址 iconUrl: "./images/播放器图标.png", //图标大小 iconSize: [70, 70] }) //添加图片标注（播放） var playMarker = L.marker([36.09, 120.35], { //添加图标 icon: playIcon }).addTo(map); //添加取消播放图标 var stopIcon = L.icon({ //图标地址 iconUrl: "./images/停止播放.png", //图标大小 iconSize: [40, 40] }) //添加图片标注（取消播放） var stopMarker = L.marker([36.09, 120.35], { //添加图标 icon: stopIcon });
3、声明鼠标点击事件
/**鼠标单击事件 * @param {string} type 事件类型（鼠标单击） * @param {function} fn 事件触发后的响应函数 */ playMarker.on("click", function () { //添加视频图层至地图中显示 videolayer = L.videoOverlay(videoUrl, videoBounds); map.addLayer(videolayer); //移除播放标注 map.removeLayer(playMarker); //添加取消播放标注 map.addLayer(stopMarker); }); /**鼠标单击事件 * @param {string} type 事件类型（鼠标单击） * @param {function} fn 事件触发后的响应函数 */ stopMarker.on("click", function () { //将地图中的视频图层移除 map.removeLayer(videolayer); //移除取消播放标注 map.removeLayer(stopMarker); //添加播放标注 map.addLayer(playMarker); });
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; 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"> var videolayer; //视频文件路径 var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm'; //视频添加的地图范围 var videoBounds = [[36.07, 120.33], [36.11, 120.37]]; 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 playIcon = L.icon({ //图标地址 iconUrl: "./images/播放器图标.png", //图标大小 iconSize: [70, 70] }) //添加图片标注（播放） var playMarker = L.marker([36.09, 120.35], { //添加图标 icon: playIcon }).addTo(map); //添加取消播放图标 var stopIcon = L.icon({ //图标地址 iconUrl: "./images/停止播放.png", //图标大小 iconSize: [40, 40] }) //添加图片标注（取消播放） var stopMarker = L.marker([36.09, 120.35], { //添加图标 icon: stopIcon }); /**鼠标单击事件 * @param {string} type 事件类型（鼠标单击） * @param {function} fn 事件触发后的响应函数 */ playMarker.on("click", function () { //添加视频图层至地图中显示 videolayer = L.videoOverlay(videoUrl, videoBounds); map.addLayer(videolayer); //移除播放标注 map.removeLayer(playMarker); //添加取消播放标注 map.addLayer(stopMarker); }); /**鼠标单击事件 * @param {string} type 事件类型（鼠标单击） * @param {function} fn 事件触发后的响应函数 */ stopMarker.on("click", function () { //将地图中的视频图层移除 map.removeLayer(videolayer); //移除取消播放标注 map.removeLayer(stopMarker); //添加播放标注 map.addLayer(playMarker); }); </script> </body> </html>