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

本文主要是介绍解决MapboxGL的Popup不支持HTMLDiv元素的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

解决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 childtemp.appendChild(html as HTMLDivElement)while (true) {child = temp.firstChildif (!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;
}