Vue中使用mapboxgl添加地图弹框所遇到的问题

    在mapbox中当我点击某个列表，需要获取到当前列表项的经纬度，然后在地图中显示这个注记，点击注记的时候，获取到这个注记的属性，在弹框中显示，大家就会想到mapboxgl.Popup来实现，但是想要在mapbox中添加弹框需要动态创建元素，给元素添加属性，动态创建的元素在Vue中会导致事件的丢失，不能直接使用 Vue提供的 @click等等，下面有一个好的方式会变得特别简单。

import recordDialog from './recordDialog.vue'    //导入这个组件框

const popDetail =  Vue.extend(recordDialog)

                        let vm= new popDetail({

                                propsData: {

                                checkObj: data

                        }

                        });

                        vm.$mount();//挂载

                        this.popupTemp = vm.$el;

在data中定义popupTemp，并且将生成好的模板赋值给它；

 if (window.vpopup) {

                                        window.vpopup.remove()

                                        window.vpopup.setLngLat(e.lngLat)

                                        .setDOMContent(this.popupTemp)

                                        .addTo(this.map.map)

                                        } else{

                                        window.vpopup = new mapboxgl.Popup({

                                        offset: 15,

                                        closeOnClick: false

                                        }).setLngLat(e.lngLat)

                                        .setDOMContent(this.popupTemp)

                                        .addTo(this.map)

                                }