如何用mapbox-gl FullscreenButton扩展类

Question

我想包装标准mapbox，请参阅这里，以添加以下特性：

1. 必需单击应该添加到按钮类中，以避免快速单击错误。
2. 该按钮不应仅仅将映射容器设置为全屏，而应使整个文档页面全屏(其他div等也是如此)。

我尝试了以下方法：小提琴。在代码运行和地图显示之前，您首先必须在ES6/Babel窗口中按返回键.

我遇到的问题：

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

"TypeError:未能在'Node‘上执行'appendChild’：参数1不是‘Node’类型。at e.addControl (https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js:390:3490) at jekuwak.js:69:5“

1. 当1被解决(我通过Chrome添加需要单击来解决这个问题)，this._mapContainer.webkitRequestFullscreen()就会被触发。

我要更改什么来获得整个页面的全屏，而不是仅仅是映射容器？

Answer 1

为#1：

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

第二条：

FullscreenControl不能以这种方式进行扩展--它的设计目的是在地图画布上操作，更改它可能会比从头开始编写您想要的功能更麻烦。如果您想使您的整个window全屏化，我建议您独立于mapboxgl实现全屏功能。如果希望能够使用mapboxgl提供的图标，可以将适当的CSS类添加到创建的元素中。