百度地图上播放视频

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

序

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

说明

地图用的是百度地图。
实时视频功能用的是声网。

实现

现在来说说是怎么实现的，如果你看过百度地图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>");
        }
    }
}

结语

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