VUE结合高德地图实现自定义窗口内播放视频（摄像头）

最新推荐文章于 2024-06-20 15:40:20 发布

你怎么瘦的像条狗一样

最新推荐文章于 2024-06-20 15:40:20 发布

阅读量1k

点赞数 2

分类专栏： VUE 地图文章标签： vue

本文链接：https://blog.csdn.net/qq_37739698/article/details/118669057

版权

VUE 同时被 2 个专栏收录

6 篇文章

订阅专栏

地图

5 篇文章

订阅专栏

本文介绍了如何在Vue.js中创建自定义InfoWindow组件，并将其与高德地图集成，展示了如何通过事件触发视频播放。核心内容包括组件模板、样式设置、JavaScript交互及在父组件中引用和使用这个组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：创建自定义窗口组件

<template>
  <div class="trsInfoWindow">
    <div style="padding: 10px">{{ vNameS }}</div>
    <ysImosSdk :vCode="vCodes" v-if="type" :key="keys"></ysImosSdk>
  </div>
</template>
<style lang="scss">
.trsInfoWindow {
  width: 400px;
  height: 285px;
  background-color: rgba(148,148,148,.7);
  .imosSdk-video {
    width: 100%;
    height: 251px;
    border-width: 0;
  }
}
</style>
<script>
import ysImosSdk from "../../components/ysImosSdk/Index";
export default {
  // 高德地图信息窗口组件
  name: 'InfoWindow',
  props: ['vCode', 'vName'],
  data () {
    return {
      vCodes: '',
      vNameS: '',
      type: false,
      keys: Date.now()
    }
  },
  methods: {
    init (item) {
      let _this = this;
      _this.type = false;
      _this.type = true;
      _this.keys = Date.now();
      _this.vNameS = item.target._opts.title;
      //_this.vCodes = item.target._opts.trsIndexCode;
      _this.vCodes = '78-DE-FZ_1';
      console.log(_this.vNameS + _this.vCodes)
    }
  },
  components: {
    ysImosSdk, // 视频插件
  }
}
</script>

二：父组件中引用自定义窗口组件

<template>
  <div>
    <div :id="mapId"></div>
    <InfoWindow ref="infoWindow"></InfoWindow>
  </div>
</template>

<script>
import InfoWindow from './InfoWindow'
export default {
  name: 'Index',
  props: ['mapType'],
  data () {
    return {
      mapId: 'cesiumContainer',
      map: null, // 地图实例
      markerList: [],
      infoWindow: {},
      vName: '', // 摄像头名称
      vCode: '',// 摄像头ID
    }
  },
  mounted () {
    this.initGaoDeMap();
  },
  methods: {
    // 初始化高德地图
    initGaoDeMap () {
      let _this = this;
      _this.map = new AMap.Map('cesiumContainer', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        skyColor: '#00162E', // 天空颜色
        mapStyle: "amap://styles/dark",
        rotateEnable:true,
        pitchEnable:true,
        zoom: 12,
        rotation:-15,
        pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode:'3D',//开启3D视图,默认为关闭
        buildingAnimation:true,//楼块出现是否带动画
        expandZoomRange:true,
        zooms:[3,20],
        center:[79.074395,39.868951]
      });

      // 控件
      _this.map.addControl(new AMap.ControlBar({
        showZoomBar:false,
        showControlButton:true,
        position:{
          right:'1200px',
          top:'10px'
        }
      }));
    },

    // 高德地图点标记(单点)
    gdMakerLable (lableObj) {
      let _this = this;
      // 创建一个 Marker 实例：
      let marker = new AMap.Marker({
        position: new AMap.LngLat(lableObj.lableList[0], lableObj.lableList[1]),
        size: new AMap.Size(lableObj.lableSize[0], lableObj.lableSize[1]),
        icon: lableObj.lableImg,
        imageOffset: new AMap.Pixel(lableObj.lableImageOffset[0], lableObj.lableImageOffset[1]),
        imageSize: new AMap.Size(lableObj.lableImageSize[0], lableObj.lableImageSize[1]),
        title: lableObj.lableName,
        trsIndexCode: lableObj.lableIndexCode,
        trsClick: lableObj.lableClick,
      });
      // 将创建的点标记添加到已有的地图实例
      _this.markerList.push(marker)
      _this.map.add(marker);
      //设置地图中心点
      _this.map.setCenter(lableObj.lableList);
      // 满足条件绑定点击事件
      if (lableObj.lableClick === true) {
        marker.on('click', function(ev) {
          _this.gdCreateInfoWindow(ev)
        });
      }
    },

    // 高德信息窗口
    gdCreateInfoWindow (ev) {
      let _this = this;
      _this.infoWindow = new AMap.InfoWindow({
        name: ev.target._opts.title,
        isCustom: true,  //使用自定义窗体
        anchor: 'bottom-center',
        content: _this.$refs.infoWindow.$el,
        offset: new AMap.Pixel(0, -10),
        closeWhenClickMap: true,
        retainWhenClose: true,
      });
      // 打开信息窗口
      _this.infoWindow.open(_this.map, ev.target.getPosition());
      // 重点：直接调用子组件方法，不然会导致多次点击一个点时，子组件无法刷新造成视频不能渲染的坑
      _this.$refs.infoWindow.init(ev);
    },
  },
  components: {
    InfoWindow,
  }
}
</script>

三：效果