vue百度离线地图v3.0---esayPlayer

最新推荐文章于 2024-06-04 14:56:11 发布

顾鸟

最新推荐文章于 2024-06-04 14:56:11 发布

阅读量255

点赞数

分类专栏：百度离线地图

本文链接：https://blog.csdn.net/qq_40881695/article/details/118962955

版权

百度离线地图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 效果图

在这里插入图片描述

2. 能够初始化出地图

请参考上一篇博客：https://blog.csdn.net/qq_40881695/article/details/118961261

3. 引入easyPlayer插件

3.1 下载

github下载链接：https://github.com/tsingsee/EasyPlayer.js

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>

顾鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue百度离线地图v3.0---esayPlayer

1. 效果图2. 能够初始化出地图请参考上一篇博客：https://blog.csdn.net/qq_40881695/article/details/1189612613. 引入easyPlayer插件3.1 下载github下载链接：https://github.com/tsingsee/EasyPlayer.js3.2 在public/index.html中引入<!DOCTYPE html><html lang=""> <head>
复制链接

扫一扫

专栏目录