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里面了
