1. 效果图
2. 能够初始化出地图
请参考上一篇博客:https://blog.csdn.net/qq_40881695/article/details/118961261
3. 引入easyPlayer插件
3.1 下载
3.2 在public/index.html中引入
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>title</title>
<script src="<%= BASE_URL %>static/map_load.js"></script>
<script src="./static/EasyPlayer-element.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4. 离线地图中使用esayPlayer播放视频/直播
注意:
1. videoTree组件没有给出来,太多内容了,可以根据业务需求自行编写
2. 涉及的图片没有给出,可以从iconfont上自行下载,我用的大小是32的png格式
3. 主要看createInfoWindow方法,在infowindow窗口中添加easyPlayer插件
<template>
<div class="testMap">
<video-tree :testMap="true" @play="play" class="videoTree" />
<div id="map_container"></div>
</div>
</template>
<script>
import videoTree from '@/components/tree/video-tree.vue'
import API from '@/api'
export default {
name: 'mapCom',
components: {
videoTree
},
data() {
return {
videoUrl: '',
map: undefined,
point: undefined,
channelParams: {
channelId: '',
date: ''
}
}
},
mounted() {
this.map = new window.BMap.Map('map_container', {
minZoom: 16,
maxZoom: 17
})
this.map.centerAndZoom(new window.BMap.Point(117.161856, 31.785556), 16)
this.map.setCurrentCity('郑州')
this.map.enableScrollWheelZoom(true)
},
methods: {
async play(params) {
this.channelParams.channelId = params.channelId
const { data } = await API.vidDevice.liveUrl(this.channelParams.channelId)
if (data.code === 200) {
this.videoUrl = data.data.flv
// console.log(this.videoUrl)
} else {
this.$message.error('Request Timeout From DAS')
}
if (params.channelId === '34020000001313000001') {
this.point = new window.BMap.Point(117.177488, 31.779544)
}
if (params.channelId !== '34020000001313000001') {
this.point = new window.BMap.Point(117.166421, 31.809989)
}
const marker = this.createMarker(this.point)
const infoWindow = this.createInfoWindow(marker)
this.map.openInfoWindow(infoWindow, this.point)
this.map.panTo(this.point) // 视图定位
},
createMarker(point) {
var myIcon = new window.BMap.Icon(require('../../../assets/img/map/monitor.png'), new window.BMap.Size(35, 35))
const marker = new window.BMap.Marker(point, {
icon: myIcon
})
this.map.addOverlay(marker)
return marker
},
createInfoWindow(marker) {
var sContent = `
<easy-player
video-url="${this.videoUrl}"
live="true"
stretch="true"
class="easyPlay"
></easy-player>
`
var opts = {
width: 350,
height: 200,
title: '标题'
}
const infoWindow = new window.BMap.InfoWindow(sContent, opts)
marker.addEventListener('click', function() {
this.openInfoWindow(infoWindow)
})
return infoWindow
}
}
}
</script>