mapbox弹框使用vue组件、mapbox弹框添加自定义事件

一、popup内容使用vue2组件，添加轮播图

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方法）

最终实现效果图：