[JavaScript知识库]vue cli中自定义mapbox的弹窗

mapbox官网示例中给出的弹窗内容使用的是setHTML事件，可以在事件内写入html代码，但由于项目需求，需要在vue cli中使用弹窗触发事件，这就导致setHTML里面编写的原生事件无法点击使用，所以我们使用新的一个事件setDOMContent，将弹窗内容设置为dom节点,同时也可以使用弹窗的点击事件

1.封装弹窗的内容为一个组件，包括内容，样式，组件需要的数据以及点击的事件,组件名称就叫pop

<template>
  <div>
    <div>
      {{ obj.person }}
      <br />
      {{ obj.legend }} <br />作物： {{ obj.type }} <br />面积： {{ obj.area }}
      <br />电话： {{ obj.phone }} <br />身份：
      {{ obj.new_work }}
    </div>
    <div class="edit_send" @click="send">分析</div>
  </div>
</template>
<script>
export default {
  name: "Popup",
  props: ["objes"],
  data() {
    return {
      obj: "",
    };
  },
  mounted() {
    this.obj = this.objes.features[0].properties;
  },
  methods: {
    send() {
      console.log("测试");
    },
  },
};
</script>

2.在地图模块引入组件

import Popup from "./pop.vue";//导入

  components: {
    Popup,
  },

编写方法用于挂载弹窗内容

createPopUp(currentFeature) {
      var that = this;
      that.videoObj = currentFeature; //传递到弹框页面的数据
      const p = Vue.extend(Popup);
      let vm = new p({
        propsData: {
          objes: that.videoObj
        }, //传参
      });
      vm.$mount(); //挂载
      this.popupTemp = vm.$el;
    },

3.在地图的弹窗事件中使用自定义弹窗组件

  map.on("click", "content", function (e) {
          var content = e.features[0].properties;
          that.createPopUp(e); //第二步中的创建内容的方法
          new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setMaxWidth("300px")//设置弹窗最大狂赌
            .setDOMContent(that.popupTemp)//插入节点
            .addTo(map);
        });