百度地图上播放视频

刺骨的言语ヽ痛彻心扉 2021-12-01 11:02 491阅读 0赞

**“横眉冷对千夫指，俯首甘为孺子牛”**

## 序 ##

最近在做一个智能眼镜的项目，眼镜上目前有的功能是人脸识别和远程协助。  
其中远程协助功能，就是需要把眼镜上摄像头拍摄的画面和眼镜当前的位置实时传回，并且在web端的地图上可查看。效果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfUnVubmVy_size_16_color_FFFFFF_t_70]

## 说明 ##

地图用的是[百度地图][Link 1]。  
实时视频功能用的是[声网][Link 2]。

## 实现 ##

现在来说说是怎么实现的，如果你看过百度地图JavaScript的API，你会发现，地图上的覆盖物是不能够添加视频的。我的实现步骤如下：

1.  给地图上的某个点添加一张图片（我这里用的图片是空白透明的），并且图片的路径后面带一个账号（保证每张图片的路径是唯一的），因为地图上会显示多个在线设备的视频。
2.  好，图片添加上去了，然后就是跟据每个图片路径后面的账号，显示各个账号当前的视频内容。
3.  先根据jQuery选择器选中图片，然后隐藏图片，在图片后面添加一个iframe，该iframe页面就是视频显示的页面。  
    看代码：

//添加多个覆盖物
    //参数onlineDevices是当前在先视频的集合
    function addMarkers(onlineDevices) {
        //先清除地图上所有的覆盖物
        map.clearOverlays();
        //遍历设备集合
        for (var i in onlineDevices) {
            //取出每个设备的位置，并描点
            //创建图片
            var pt = new BMap.Point(onlineDevices[i].longitude, onlineDevices[i].latitude);
            var myIcon = new BMap.Icon("/img/transparent.png?account=" + onlineDevices[i].account, new BMap.Size(100, 100));
            var opts = {
                position: pt,    // 指定标注所在的地理位置
                icon: myIcon,
                title: onlineDevices[i].account,
                offset: new BMap.Size(5, -75)    //设置偏移量
            }
            var marker2 = new BMap.Marker(pt, opts);  // 创建标注
            map.addOverlay(marker2);              // 将标注添加到地图中
            // 单击事件
            marker2.addEventListener('click', showScreen);
            //添加点
            var points = {
                position: pt,    // 指定标注所在的地理位置
                title: onlineDevices[i].account,
            }
            var marker = new BMap.Marker(pt,points);
            map.addOverlay(marker);
        }
    
        //地图加载完成监听事件
        map.addEventListener('tilesloaded',function () {
        //该方法在下面
            addVideo(onlineDevices);
        });
    }
    
    //通过iframe在地图上添加多个视频
    function addVideo(data) {
        if (ifInitMap && data && data.length > 0) {
            for (var i in data) {
                $("[src='/img/transparent.png?account=" + data[i].account + "']").hide();
                //在图片后面添加iframe，用于显示视频
                $("[src='/img/transparent.png?account=" + data[i].account + "']").after("<iframe id='screenIframe' frameborder='0' scrolling='no' src='/screenOnMap/" + data[i].account + "' width='100px' height='100px'></iframe>");
            }
        }
    }

## 结语 ##

其实，实现的过程并不重要，重要的是思路，当时想出这个办法也是花了好长时间。。在此共勉。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfUnVubmVy_size_16_color_FFFFFF_t_70]: /images/20211201/bea353b0dcac460d96b6642844b87dd7.png
[Link 1]: http://lbsyun.baidu.com/
[Link 2]: https://www.agora.io/cn/