如何使用mapbox-gl FullscreenButton扩展类

Question

我想包装标准mapbox-gl FullscreenButton，请参见此处 ，以添加以下功能：

1. 需要将clicksclick添加到按钮类中，以避免Fastclick错误。
2. 该按钮不仅应使mapcontainer变为全屏，还应使整个文档页面变为全屏（其他div等也应如此）。

我尝试了以下方法： 小提琴 。 您必须首先以某种方式在ES6 / Babel窗口中单击return，然后代码才能运行，并且地图显示...

我遇到的问题：

1. “ onAdd ”方法以某种方式触发此错误：

“ TypeError：无法在'Node'上执行'appendChild'：参数1不是'Node'类型。在e.addControl（ https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0 /mapbox-gl.js:390:3490 ）在jekuwak.js：69：5“

2.解决1后 （我通过通过Chrome Devtools添加needsclick来解决），将触发this._mapContainer.webkitRequestFullscreen() 。

我如何更改才能全屏显示整个页面，而不仅仅是mapcontainer？

Answer 1

对于＃1：

const fs = new mapboxgl.FullscreenControl();
map.addControl(fs)
fs._fullscreenButton.classList.add('needsclick');

对于＃2：

FullscreenControl不能以这种方式进行扩展–它被设计为可以在地图画布上进行操作和更改，这可能比仅从头开始编写所需的功能要麻烦得多。 如果要使整个window全屏显示，建议您独立于mapboxgl实现全屏显示功能。 如果您希望能够使用mapboxgl随附的图标，则可以将适当的CSS类添加到您创建的元素中。