Leaflet Popup使用Vue组件

Leaflet Popup使用Vue组件

/**
* 返回vue组件dom
* @param component	xxx.vue
* @param props	自定义传递给组件的属性数据
* @returns {any|VNode}
*/
function returnVueComponentElement(component, props = {}) {
    let app = createApp({
        render() {
            return h(component, props);
        }
    });
   // app.use(router);	// 如需跳转页面，需要引入router	import router from "@/router";
    let mount = app.mount(document.createElement("div"));
    return mount.$el;
}

// 创建一个marker添加到地图
const layer = L.marker(latLng).addTo(map);
// 给marker绑定气泡
layer.bindPopup(null, {
    className: 'custom_popup_style',
    offset: new Point(0, -20),
    closeButton: false	// leaflet默认popup关闭按钮使用a标签，点击会直接出现空白页面 http://localhost:3000/#/close	因此在这里不显示关闭按钮，关闭弹窗需自定义
});
// 点击marker显示气泡后添加组件
layer.on("popupopen", e => {
    e.target.setPopupContent(returnVueComponentElement(component, {
        dataObj: {},	// 你自己的数据，在组件中使用props调用
        layer	// 把当前marker传递过去，关闭弹窗使用	关闭弹窗事件 layer.closePopup();
    }));
});