mapbox popup组件内容 有点击事件等操作

如果只是展示，可以在 properties.description 中使用原生html ，

然后

// new SFMap.Popup()

                    //         .setLngLat(coordinates)

                    //         .setHTML(description)

                    //         .addTo(window.map);

 

便可以渲染出来

 

 

但是当有其他的操作事件时，    原生的事件会不起效果, 不生效，  要使用   setDOMContent

代码：

     点击事件发生时：

                window.map.on('click','points',(e)=>{

                    var coordinates = e.features[0].geometry.coordinates.slice();

                      var description = e.features[0].properties.description;

                    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {

                        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;

                    }//弹框的定位

                        this.createPopUp(e)

                        new SFMap.Popup()

                            .setLngLat(coordinates)

                            .setMaxWidth("400px")//设置弹窗最大狂赌

                            .setDOMContent(this.popupTemp)

                            .addTo(window.map);

                 

                        })

 

//函数

        createPopUp(currentFeature) {

            var that = this;

            that.videoObj = currentFeature; //传递到弹框页面的数据

            const p = Vue.extend(Popup);     //Popup 是一个单独的模板页面 。自定义

            let vm = new p({

                propsData: {

                objes: that.videoObj   //要传输的数据对象

                }, //传参

            });

            vm.$mount(); //挂载

            this.popupTemp = vm.$el;

            },