给高德地图的信息窗体添加点击事件

1.首先使用 Vue.extend() 创建一个“子类”实例，然后将这个实例的挂载到高德地图的信息窗体的上。

let content =   `<div class="sensorWindow" style="width:500px;height:330px;background-color:#192B49;border-radius:5px;border:1px solid rgba(79,249,255,0.5);padding:0px 10px 10px 10px;">
                   <div style="width:100%;height:36px; color:#4ff9ff;line-height:36px;font-size:16px;">${sensor.label}</div>
                   <div class="shutter" style="width:100%;height:284px;border-radius:0px;">
                       <div class="shutter-img" style="width:100%;height:100%;">
                           <el-carousel :interval="5000" arrow="always" indicator-position="none" @change="changePic">
                               <el-carousel-item>
                                   <a href="#" data-shutter-title="第一张"><img src="http://waterlog.seethrough.cn/water/${(sensor.device_id === "c844290001a7")?"c844290001a7":"c844150002af"}/1.jpg" alt="#" width="100%" height="100%"></a>
                               </el-carousel-item>
                               <el-carousel-item>
                                   <a href="#" data-shutter-title="第二张"><img src="http://waterlog.seethrough.cn/water/${(sensor.device_id === "c844290001a7")?"c844290001a7":"c844150002af"}/2.jpg" alt="#" width="100%" height="100%"></a>
                               </el-carousel-item>
                               <el-carousel-item>
                                   <a href="#" data-shutter-title="第三张"><img src="http://waterlog.seethrough.cn/water/${(sensor.device_id === "c844290001a7")?"c844290001a7":"c844150002af"}/3.jpg" alt="#" width="100%" height="100%"></a>
                               </el-carousel-item>
                               <el-carousel-item>
                                   <a href="#" data-shutter-title="第四张"><img src="http://waterlog.seethrough.cn/water/${(sensor.device_id === "c844290001a7")?"c844290001a7":"c844150002af"}/4.jpg" alt="#" width="100%" height="100%"></a>
                               </el-carousel-item>
                               <el-carousel-item>
                                  <a href="#" data-shutter-title="第五张"><img src="http://waterlog.seethrough.cn/water/${(sensor.device_id === "c844290001a7")?"c844290001a7":"c844150002af"}/5.jpg" alt="#" width="100%" height="100%"></a>
                               </el-carousel-item>
                           </el-carousel>
                       </div>
                       <div class="shutter-desc">
                            <p>{{msg}}</p>
                       </div>
                   </div>
                   ${sensor.video_url?'<span id="openVideoBtn_'+sensor.device_id +'" class="openBigVideoBtn" style="position:relative;top:-70px;left:400px;color:#fff;z-index:4;border:1px solid #fff;border-radius:5px;padding:2px 5px;cursor: pointer;"  v-on:click="showVideo()">查看视频</span>':''}
               </div>`;
let MyComponent = Vue.extend({
	template: content,
	data(){
	   return{
	       msg:'第一张'
	   }
	},
	methods:{
	   changePic(n){
	       console.log(n);
	       switch(n){
	           case 0:
	               this.msg = '第一张';break;
	           case 1:
	               this.msg = '第二张';break;
	           case 2:
	               this.msg = '第三张';break;
	           case 3:
	               this.msg = '第四张';break;
	           case 4:
	               this.msg = '第五张';break;
	           default : break;
	       }
	   },
	   showVideo(){
			//点击事件执行的代码
		}
	}
});
let component = new MyComponent().$mount();
let infoWindow = new AMap.InfoWindow({
   content : component.$el,  //将实例的根 DOM 元素挂载到信息窗体上
   offset: new AMap.Pixel(15, -56),
   autoMove: true,
   isCustom:true,
   closeWhenClickMap:true,
   retainWhenClose:true
});
let coord =_this.gpsToGCJ02(Number(sensor.long),Number(sensor.lat));
infoWindow.open(_this.map, new AMap.LngLat(coord.lon,coord.lat));//打开信息窗体
//关闭信息窗体时销毁子类实例
infoWindow.on("close",function(){
	component.$destroy(); //销毁
})

注意在关闭信息窗体时要手动销毁该子类vue实例