javascript - 如何使用 mapbox-gl FullscreenButton 扩展类

Question

我想包装标准的mapbox-gl FullscreenButton，请参阅here ，添加以下功能:

1. needsclick 应添加到按钮类以避免 Fastclick 错误。
2. 按钮不仅仅使 map 容器全屏显示，应该使整个文档页面全屏(其他 div 也是如此)等)。

我尝试了以下操作:fiddle 。不知何故，你首先必须在 ES6/Babel 窗口中按回车键，然后代码才会运行并且 map 会显示...

我遇到的问题:

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

"TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type '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"

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

我需要更改什么才能获得整个页面全屏，而不仅仅是 map 容器？

Answer 1

对于#1:

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

对于#2:

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