解决MapboxGL的Popup不支持HTMLDiv元素的问题

news2024/11/15 2:23:31

解决MapboxGL的Popup不支持HTMLDiv元素的问题

官网给出的文档是不支持HTMLDivElement的,只支持HTML标签。
在这里插入图片描述
如果单纯的只显示字符串,那就没问题,如果想在Popup中使用更强大的功能,此时就不行了,下面是源码的一部分显示如下:

    /**
     * Sets the popup's content to the HTML provided as a string.
     *
     * This method does not perform HTML filtering or sanitization, and must be
     * used only with trusted content. Consider {@link Popup#setText} if
     * the content is an untrusted text string.
     *
     * @param {string} html A string representing HTML content for the popup.
     * @returns {Popup} Returns itself to allow for method chaining.
     * @example
     * const popup = new mapboxgl.Popup()
     *     .setLngLat(e.lngLat)
     *     .setHTML("<h1>Hello World!</h1>")
     *     .addTo(map);
     * @see [Example: Display a popup](https://docs.mapbox.com/mapbox-gl-js/example/popup/)
     * @see [Example: Display a popup on hover](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/)
     * @see [Example: Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/)
     * @see [Example: Attach a popup to a marker instance](https://docs.mapbox.com/mapbox-gl-js/example/set-popup/)
     */
    setHTML(html: string): this {
        const frag = window.document.createDocumentFragment();
        const temp = window.document.createElement('body');
        let child;
        temp.innerHTML = html;
        while (true) {
            child = temp.firstChild;
            if (!child) break;
            frag.appendChild(child);
        }

        return this.setDOMContent(frag);
    }

可以看出,他接受的是一个html字符串,导致我们想在Popup中使用Vue组件就不支持了。

解决方法如下

通过继承Popup重写setHTML方法,代码如下:

class PopupExtend extends Popup {
    setHTML(html: HTMLDivElement | string): this {
        const frag = window.document.createDocumentFragment()
        const temp = window.document.createElement("body")
        let child
        temp.appendChild(html as HTMLDivElement)
        while (true) {
            child = temp.firstChild
            if (!child) {
                break
            }
            frag.appendChild(child)
        }
        return this.setDOMContent(frag)
    }
}

我们使用Popup的时候,直接使用PopupExtend类,就不再使用默认的Popup了,代码如下:

const element = componentToElement(LayerPopupComponent, {}) as HTMLDivElement
new PopupExtend().setLngLat(e.lngLat).setHTML(element).addTo(this.map)

componentToElement方法如下:

// 组件转原生dom
componentToElement(component, props) {
   const app = createApp({
       render() {
           return h(component, props)
       }
   });
   app.use(ElementPlus);
   return app.mount(document.createElement("div")).$el;
}

年三十还在搬砖,天选打工人,祝大家2024新年快乐,明年再战,完结,撒花✿✿ヽ(°▽°)ノ✿

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1441132.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[VulnHub靶机渗透] Sar: 1

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

Python环境下基于最大离散重叠小波变换和支持向量回归的金融时间序列预测

金融时间序列具有非线性、高频性、随机性等特点&#xff0c;其波动情况不仅与当前股票市场、房地产市场、贸易市场等有强联动性&#xff0c;而且大幅度起伏对于其他市场有较大的影响和冲击。由于金融市场受多种因素影响且各影响因素间也存在一定复杂动态交互关系&#xff0c;导…

[CUDA手搓]从零开始用C++ CUDA搭建一个卷积神经网络(LeNet),了解神经网络各个层背后算法原理

文章目录 前言一、所需环境二、实现思路2.1. 定义了LeNet网络模型结构&#xff0c;并训练了20次2.2 以txt格式导出训练结果(模型的各个层权重偏置等参数)2.3 (可选)以pth格式导出训练结果&#xff0c;以方便后期调试2.4 C CUDA要做的事 三、C CUDA具体实现3.1 新建.cu文件并填好…

nvm安装nodejs 报错certificate has expired or is not yet valid

今天在使用nvm安装nodejs时&#xff0c;突然报如下错误&#xff1a; 从报错信息中很容易知道这是因为镜像凭证过期&#xff0c;所以我们只需要换个镜像即可。 打开你nvm的安装目录下的settings.txt文件&#xff0c;将下面两行添加到里面&#xff0c;如果已经有的就覆盖。 nod…

LeetCode Python - 4. 寻找两个正序数组的中位数

文章目录 题目答案运行结果 题目 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,3], nums2 [2…

Flink CDC 与 Kafka 集成:Snapshot 还是 Changelog?Upsert Kafka 还是 Kafka?

博主历时三年精心创作的《大数据平台架构与原型实现:数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行,点击《重磅推荐:建大数据平台太难了!给我发个工程原型吧!》了解图书详情,京东购书链接:https://item.jd.com/12677623.html,扫描左侧二维…

【精选】java初识多态 子类继承父类

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

使用 Docker 镜像预热提升容器启动效率详解

概要 在容器化部署中,Docker 镜像的加载速度直接影响到服务的启动时间和扩展效率。本文将深入探讨 Docker 镜像预热的概念、必要性以及实现方法。通过详细的操作示例和实践建议,读者将了解如何有效地实现镜像预热,以加快容器启动速度,提高服务的响应能力。 Docker 镜像预热…

【Python】使用 requirements.txt 与 pytorch 相关配置

【Python】使用 requirements.txt 与 pytorch 相关配置 前言一、pip1、导出结果含有路径2、导出不带路径的 二、Conda1、导出requirements.txt2、导出yml 文件 三、第三方包&#xff1a;pipreqs&#xff08;推荐&#xff09;1、创建并激活conda环境2、安装requirements文件的pi…

DevOps:CI、CD、CB、CT、CD

目录 一、软件开发流程演化快速回顾 &#xff08;一&#xff09;瀑布模型 &#xff08;二&#xff09;原型模型 &#xff08;三&#xff09;螺旋模型 &#xff08;四&#xff09;增量模型 &#xff08;五&#xff09;敏捷开发 &#xff08;六&#xff09;DevOps 二、走…

ARM汇编[0] hello world

文章目录 简述寄存器语法系统调用例程 简述 如果不了解x86汇编的话建议先了解下&#xff0c;x86资料多、环境好搞、容易入门 阿尔可是急于求成的人&#xff0c;希望赶快看到成果&#xff1b; 所以本篇文章不会东讲西讲展开讲&#xff0c;只讲让hello world汇编能跑起来的关键…

基于 Python opencv 的人脸识别的酒店客房入侵系统的检测

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

《MySQL 简易速速上手小册》第2章:数据库设计最佳实践(2024 最新版)

文章目录 2.1 规划高效的数据库架构2.1.1 基础知识2.1.2 重点案例&#xff1a;在线电商平台2.1.3 拓展案例 1&#xff1a;博客系统2.1.4 拓展案例 2&#xff1a;库存管理系统 2.2 数据类型和表设计2.2.1 基础知识2.2.2 重点案例&#xff1a;个人健康记录应用2.2.3 拓展案例 1&a…

数字信号处理 试题 复盘解答(八)

数字信号处理 试题 复盘解答&#xff08;八&#xff09; ps:仅 用作复盘 和回顾知识点&#xff0c;如果有疑问或者错误请提出。 涉及年份 &#xff1a;19 - 21年 六、 个人感觉缺少条件 七、 使用双线性变换法对一个最小相位模拟滤波器进行数字化得到的数字滤波器一般来说不再…

牛客网SQL进阶127: 月总刷题数和日均刷题数

官网链接&#xff1a; 月总刷题数和日均刷题数_牛客题霸_牛客网现有一张题目练习记录表practice_record&#xff0c;示例内容如下&#xff1a;。题目来自【牛客题霸】https://www.nowcoder.com/practice/f6b4770f453d4163acc419e3d19e6746?tpId240 0 问题描述 基于练习记录表…

app逆向-android-studio安装使用教程

Android Studio 是谷歌推出的一个Android集成开发工具&#xff0c;基于IntelliJ IDEA. 类似 Eclipse ADT&#xff0c;Android Studio 提供了集成的 Android 开发工具用于开发和调试。 android-studio下载地址&#xff1a;https://developer.android.com/studio/archive androi…

第59讲订单数据下拉实现

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;/*** 订单查询 type值 0 全部订单 1待付款 2 待收货 3 退款/退货* param type* return*/RequestMapping("/list")public R list(Integer type,Integer page,Integer pageSize){System.out.pri…

Flink从入门到实践(二):Flink DataStream API

文章目录 系列文章索引三、DataStream API1、官网2、获取执行环境&#xff08;Environment&#xff09;3、数据接入&#xff08;Source&#xff09;&#xff08;1&#xff09;总览&#xff08;2&#xff09;代码实例&#xff08;1.18版本已过时的&#xff09;&#xff08;3&…

服务器与电脑的区别?

目录 一、什么是服务器 二、什么是电脑 三、服务器和电脑的区别 一、什么是服务器 服务器是指一种专门提供计算和存储资源、运行特定软件服务的物理或虚拟计算机。服务器主要用于接受和处理来自客户端&#xff08;如个人电脑、手机等&#xff09;的请求&#xff0c;并向客户…

制作耳机壳的UV树脂和塑料材质相比优势有哪些?

制作耳机壳的UV树脂相比塑料材质有以下优势&#xff1a; 高强度与耐磨性&#xff1a;UV树脂具有高强度和耐磨性&#xff0c;能够更好地保护耳机内部零件&#xff0c;延长耳机使用寿命。相比之下&#xff0c;塑料材质可能较易磨损或刮伤。耐高温&#xff1a;UV树脂具有较好的耐…