mapbox popup挂载自定义组件

var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map)

mapbox官网上可以看到他的popup里面的内容，只能是原生的html，那些标签是可以写style的，是可以影响他的。

class是不会生效的，除非将class写在APP.Vue里面。

但是如果我们想要每个图层都添加一种popup，而且图层数量很多，显示内容不同的话，这样硬写不是可取的，还是应该使用vue组件，只不过要把vue组件包在这个popup里面。

操作
1、新建pop.vue文件，暂时没有写过多复杂的样式

<template> 
<div class="pop">
    1111
</div>
</template>

<script>
    export default {
        name: 'pop',
        components: {
            
        },
        props: ['detailId'],
        data() {
            return {
            }
        },
        mounted() {
            
        },
        methods: {
        }
    };
</script>

<style lang="less" scoped>
.pop{
 height: 100px;
 width: 100px;
 background: red;
}
</style>

2、地图页面map.vue
第一引入上面弹框组件，同时引入vue实例

import pop from './pop.vue';
import Vue from "vue";
const popDetail = Vue.extend(pop)

第二挂载弹框内容
注意，data里面需要定义全局popupTemp

 data() {
      return {
      popupTemp:null,
    };

接下来propsData里面是要传递到弹框的参数
在methods里：

 getpop(){
         let vm= new popDetail({
            propsData: {
              detailId: "qqq"
          }
      });
       vm.$mount();//挂载
      this.popupTemp = vm.$el;
  },

这里需要注意，propsData是关键字应该，不是传下去的值，传下去的值是detailId，在组件内接收的也是detailId，组件内部是这样

 props: ['detailId'],

第三mapbox创建弹框

注意这里需要使用setDOMContent来设置弹框内容

 new mapboxgl.Popup()
        .setLngLat(event.lngLat)
        .setDOMContent(self.popupTemp)
        .addTo(self.map);

最后结果是这个组件填充到popup里面了