var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
.setLngLat(e.lngLat)
.setHTML("<h1>Hello World!</h1>")
.setMaxWidth("300px")
.addTo(map)
mapbox官網(wǎng)上可以看到他的popup里面的內(nèi)容，只能是原生的html，那些標簽是可以寫style的纺酸，是可以影響他的嘲碱。
class是不會生效的金砍，除非將class寫在APP.Vue里面。
但是如果我們想要每個圖層都添加一種popup麦锯，而且圖層數(shù)量很多恕稠，顯示內(nèi)容不同的話，這樣硬寫不是可取的扶欣，還是應該使用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)
第二掛載彈框內(nèi)容
注意凑懂，data里面需要定義全局popupTemp
data() {
return {
popupTemp:null,
};
接下來propsData里面是要傳遞到彈框的參數(shù)
在methods里：
getpop(){
let vm= new popDetail({
propsData: {
detailId: "qqq"
}
});
vm.$mount();//掛載
this.popupTemp = vm.$el;
},
這里需要注意，propsData是關鍵字應該梧宫，不是傳下去的值接谨，傳下去的值是detailId摆碉，在組件內(nèi)接收的也是detailId，組件內(nèi)部是這樣
props: ['detailId'],
第三mapbox創(chuàng)建彈框
注意這里需要使用setDOMContent來設置彈框內(nèi)容
new mapboxgl.Popup()
.setLngLat(event.lngLat)
.setDOMContent(self.popupTemp)
.addTo(self.map);
最后結果是這個組件填充到popup里面了
