给高德地图的信息窗体添加点击事件
1.首先使用**Vue.extend()**创建一个“子类”实例,然后将这个实例的挂载到高德地图的信息窗体的上。let content =`<div class="sensorWindow" style="width:500px;height:330px;background-color:#192B49;border-radius:5px;border:1px solid rgba(...
·
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实例
更多推荐
已为社区贡献6条内容
所有评论(0)