高德地图 ----- infoWindow播放视频

1. public/index.html

public 下放 liveplayer 文件夹，component 是 vue 组件方式，element 是 html 方式，两种方式都需要存在，否则可能不能加载视频，
下面的关键点在 createInfoWindow 这个函数内，这里播放视频用的是 liveplayer，easyplayer 应该也是这样的，没有尝试

	<script src="./liveplayer/component/liveplayer-lib.min.js"></script>
  	<script src="./liveplayer/element/liveplayer-element.min.js"></script>

1. g-marker-player

• html

<template>
  <div>
       <g-map @gmap="getGmap" />
  </div>
</template>

• js

<script>
import GMap from './g-map.vue';
import LivePlayer from "@liveqing/liveplayer";
export default {
    components: { GMap, LivePlayer },
    data(){
        return{
            map:null,
        }
    },
    mounted(){
        this.getGmap()
    },
    methods:{
        getGmap(val){
            this.map = val
        },
        showAllMarker(posArr){
            const that = this
            that.map.clearMap()

            posArr.forEach(ele => {
                if(ele.installLongitude && ele.installLatitude){
                    const LngLat = new AMap.LngLat(ele.installLongitude, ele.installLatitude)
                    const marker = new AMap.Marker({
                        position: LngLat
                    });

                    const infoWindow = new AMap.InfoWindow({
                        isCustom: true,
                        content: that.createInfoWindow(ele.monitorName, ele.videoStreamAddress),
                        offset: new AMap.Pixel(0, -35)
                    });

                    marker.on('click', function (e) {
                        infoWindow.open(that.map, LngLat)
                    })

                    that.map.add(marker);
                    that.map.setFitView()
                }
            });
        },
        showMarkerWithPlayer(position, title, url){
            const that = this
            const LngLat = new AMap.LngLat(position.lng, position.lat)

            const infoWindow = new AMap.InfoWindow({
                isCustom: true,
                content: that.createInfoWindow(title, url),
                offset: new AMap.Pixel(0, -35)
            });

            infoWindow.open(that.map, LngLat)
            that.map.setFitView()
        },
         createInfoWindow(title, url){
            const IW = document.createElement('div')
            const header = document.createElement('div')
            const body = document.createElement('div')

            header.innerHTML = title
            // http://220.161.87.62:8800/hls/1/index.m3u8
            body.innerHTML = `
                <live-player
                    video-url="http://220.161.87.62:8800/hls/1/index.m3u8"
                    live="true"
                    stretch="true"
                ></live-player>
                `
            IW.style.width = '500px'

            header.style.lineHeight = '30px'
            header.style.background = '#66b1ff'
            header.style.color = '#fff'
            header.style.paddingLeft = '10px'

            IW.appendChild(header)
            IW.appendChild(body)

            return IW
        }
    }
}
</script>

2. index.vue

使用 g-marker-player 组件

• html

  <g-marker-player ref="GMarkerPlayerRef" style="height:100%;"/>

• js

<script>
import { videoList } from '@/api/video'
import GMarkerPlayer from '@/components/Gmap/g-marker-player'
export default {
  components:{
    GMarkerPlayer
  },
  data() {
    return {
      input3:'',
      list:[]
    };
  },
  created(){
    this.getList()
  },
  methods:{
    async getList(){
      const { data } = await videoList()
      this.list = data
      this.$refs.GMarkerPlayerRef.showAllMarker(data)
    },
    handleNodeClick(item){
      // console.log(item);
      const LngLat = {
        lng: item.installLongitude,
        lat: item.installLatitude
      }
      this.$refs.GMarkerPlayerRef.showMarkerWithPlayer(LngLat, item.monitorName, item.videoStreamAddress)
    }
  }
}
</script>