高德地图上放多个视频，并有切换按钮

<template>
  <div>
    <div id="GDMap" style="height: calc(100vh - 200px)"></div>
  </div>
</template>

<script>
import loadMap from "@/assets/js/loadMap.js";

export default {
  data() {
    return {
      obj:{},
      markersData:[{
        id:"001",
        name:"表具点1",
        position:[119.959333,31.806603],
        video:["https://v-cdn.zjol.com.cn/280443.mp4","https://v-cdn.zjol.com.cn/276982.mp4"]
      },{
        id:"002",
        name:"表具点2",
        position:[119.894788,31.701507],
        video:["https://v-cdn.zjol.com.cn/280443.mp4","https://v-cdn.zjol.com.cn/276982.mp4"]
      }
      ],
      DialogVisible: false,
      key: "3862bb74758c8d185100ed5df030949d",
      plugins: [
        "AMap.ToolBar",
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.MouseTool",
        "AMap.PolyEditor",
        "AMap.RectangleEditor",
        "AMap.DistrictLayer",
        "AMap.CustomLayer",
      ],
      v: "1.4.5",
      GDMap: null,
    };
  },
  methods: {
    setTimer(){
      console.log("开始")
      console.log(this.obj)
      let obj = this.obj
      for(let key in obj){
        if(obj[key][1]<obj[key][0].length-1){
          obj[key][1]= obj[key][1]+1
        }else{
          obj[key][1]=0
        }
        let index = obj[key][1]
        console.log(index)
        document.querySelector("#BV"+key).src = obj[key][0][index]  
      }
      setTimeout(()=>{
        this.setTimer()
      },10000)
    },
    mapBtnClick(){
      let obj = this.obj
      document.querySelector(".amap-markers").addEventListener("click", e=>{
         console.log(e.target.nodeName)
         if(e.target.nodeName == "BUTTON"){
            console.log(e.target.id)
            let id = e.target.id
              obj[id][2] = obj[id][2] == 0?1:0
              if(obj[id][2] == 1) {
                 document.querySelector("#B"+id).style.display="none"
                 document.querySelector("#S"+id).style.display="block"
                 let smallVideos = document.querySelector("#S"+id).getElementsByTagName("video")
                 for(let i=0;i<smallVideos.length;i++){
                   smallVideos[i].currentTime = 0
                 }
              }else{
                 document.querySelector("#B"+id).style.display="block"
                 document.querySelector("#S"+id).style.display="none"  
                 document.querySelector("#BV"+id).currentTime=0
              }
         }        
      })
      let filterVideos=[]
      let videos = document.querySelector(".amap-markers").getElementsByTagName("video")
      for(let i=0;i<videos.length;i++){
        if(videos[i].id.indexOf("BV")!=-1){
          let key = videos[i].id.replace("BV","")
          filterVideos.push(videos[i])
          videos[i].addEventListener("ended",()=>{
               if(obj[key][1]<obj[key][0].length-1){
                  obj[key][1]= obj[key][1]+1
                }else{
                  obj[key][1]=0
                }
              let index = obj[key][1]
              videos[i].src = obj[key][0][index]  
          })
        }
      }
    
      console.log(filterVideos.length)

    },
    showMarker(){
      for(let i=0;i<this.markersData.length;i++){
      let marker  = new AMap.Marker({
        position:this.markersData[i].position,
        map:this.GDMap
      })
      let labelContent = `
      <div>
        <button id="${this.markersData[i].id}" type="button">切换</button>
       
      </div>
      <div id="B${this.markersData[i].id}">
        <video  id="BV${this.markersData[i].id}"  controls autoplay src="${this.markersData[i].video[0]}" style="width:200px;height:150px;"></video>
      
      </div>
      <div style= "display:none" id="S${this.markersData[i].id}">
        ${
          this.markersData[i].video.map(item=>{
            return `<video  controls autoplay loop src="${item}" style="padding:5px;width:100px;height:80px;" ></video>`
          }).join("")
        }
      
      </div>
      `
      marker.setLabel({
        offset: new AMap.Pixel(40, 5),
        content:labelContent
      })      
      }
      setTimeout(()=>{
        this.mapBtnClick()
      },2000)

    },
    showMap() {
      loadMap(this.key, this.plugins, this.v)
        .then((AMap) => {
          this.GDMap = new AMap.Map("GDMap", {
            zoom: 11,
            resizeEnable: true,
            keyboardEnable: false,
          });

            // this.GDMap.add(circle)

          this.GDMap.on("complete", () => {
            this.showMarker()          
          });
        })
        .catch((err) => {
          console.log(err)
          console.log("地图加载失败！");
        });
    },
  },

  mounted() {
    this.showMap();
    let allData = this.markersData
    let obj = this.obj
    for(let i =0;i<allData.length;i++){
      let key = allData[i].id
      obj[key] = [allData[i].video,0,0]
    }

    // setTimeout(() => {
    //    this.setTimer()
    // }, 10000);    
  },
};
</script>

<style>
/* .v-modal{z-index:5 !important;} */
.amap-sug-result {
  z-index: 2024;
}
</style>