Leaflet Popup使用Vue组件

最新推荐文章于 2024-09-13 11:08:13 发布

奔跑的呱呱牛

最新推荐文章于 2024-09-13 11:08:13 发布

阅读量1.3k

点赞数 1

分类专栏： GIS 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_34451215/article/details/126887726

版权

GIS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Leaflet地图中结合Vue组件来创建自定义气泡内容。通过`returnVueComponentElement`函数，将Vue组件转换为DOM元素，并在Marker的popupopen事件中设置为气泡内容。博客还提及了如何处理Leaflet默认的关闭按钮问题，以及如何传递数据和关闭弹窗。

摘要由CSDN通过智能技术生成

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();
    }));
});