一、popup内容使用vue组件,添加轮播图
1、新建Popup.vue文件,添加弹框内容
<template>
<div>
<div class="pop_tit" @click="openD(obj)">
{{ obj.name }}<i class="iconfont icon-jiancedianweidanchuang-you"></i>
</div>
<!-- 轮播图 -->
<el-carousel height="240px" :interval="4000" trigger="click">
<el-carousel-item v-for="item in obj.Vimages" :key="item">
<img :src="item" class="vima" />
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
import Bus from "../../utils/bus";
export default {
name: "Popup",
props: ["obj"],
methods: {
openD(geom) {
Bus.$emit("detailVUE", geom);
},
},
};
</script>
2、地图页面map.vue
第一引入上面弹框组件,同时引入vue实例
import Bus from "../../utils/bus";
import Popup from "./Popup"; //引入弹框组件
import Vue from "vue";
第二挂载弹框内容
propsData里面是要传递到弹框的参数
methos:{
createVideoPopUp(currentFeature) {
var that = this;
that.videoObj = currentFeature;//传递到弹框页面的数据
var Vimages = [
"http://****:8080/static/images/map/waterNew/img_shili1.png",
"http://****:8080/static/images/map/waterNew/img_shili2.png",
"http://****:8080/static/images/map/waterNew/img_shili3.png",
];//轮播图的图片
that.videoObj.Vimages = Vimages;
const p = Vue.extend(Popup);
let vm = new p({
propsData: {
obj: that.videoObj,
isShowName: true,
},//传参
});
vm.$mount();//挂载
this.popupTemp = vm.$el;
}
}
第三mapbox创建弹框
注意这里需要使用setDOMContent来设置弹框内容
//点击地图上面的标记点位,弹出弹框
this.map.on("click", "QTstation", function (e) {
var that = this
var coordinates = e.features[0].geometry.coordinates.slice();
this.map.on("click", "QTstation", function (e) {
that.createPopUp(e.features[0].properties);//第二步中的创建内容的方法
new mapboxgl.Popup({ closeButton: false })
.setLngLat(coordinates)
.setDOMContent(that.popupTemp)
.addTo(that.map);
})
})
3、mapbox弹出窗口中的Click事件
通过Bus 进行通信,上述代码中有体现(openD方法)
最终实现效果图: