如何使用 mapbox-gl FullscreenButton 扩展 class
How to extend a class with mapbox-gl FullscreenButton
我想包装标准的 mapbox-gl FullscreenButton，请参阅 here，以添加以下功能：
- needsclick 应该添加到按钮 class 以避免 Fastclick 错误。
- 按钮不是让地图容器全屏显示，而是
应该使整个文档页面全屏显示（其他 div 也是如此
等）。
我尝试了以下方法：fiddle。在代码将 运行 和地图显示之前，您首先必须以某种方式在 ES6/Babel window 中点击 return...
我 运行 遇到的问题：
- “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()。
我要更改什么才能全屏显示整个页面，而不仅仅是地图容器？
对于#1：
const fs = new mapboxgl.FullscreenControl();
map.addControl(fs)
fs._fullscreenButton.classList.add('needsclick');
对于 #2：
FullscreenControl 无法以这种方式扩展——它被设计为在地图 canvas 上运行，更改它可能比从头开始编写您想要的功能更麻烦。如果你想让你的整个 window 全屏，我建议你独立于 mapboxgl 实现全屏功能。如果您希望能够使用 mapboxgl 提供的图标，您可以将适当的 CSS 类 添加到您创建的元素中。
我想包装标准的 mapbox-gl FullscreenButton，请参阅 here，以添加以下功能：
- needsclick 应该添加到按钮 class 以避免 Fastclick 错误。
- 按钮不是让地图容器全屏显示，而是 应该使整个文档页面全屏显示（其他 div 也是如此 等）。
我尝试了以下方法：fiddle。在代码将 运行 和地图显示之前，您首先必须以某种方式在 ES6/Babel window 中点击 return...
我 运行 遇到的问题：
- “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()。
我要更改什么才能全屏显示整个页面，而不仅仅是地图容器？
对于#1：
const fs = new mapboxgl.FullscreenControl();
map.addControl(fs)
fs._fullscreenButton.classList.add('needsclick');
对于 #2：
FullscreenControl 无法以这种方式扩展——它被设计为在地图 canvas 上运行，更改它可能比从头开始编写您想要的功能更麻烦。如果你想让你的整个 window 全屏，我建议你独立于 mapboxgl 实现全屏功能。如果您希望能够使用 mapboxgl 提供的图标，您可以将适当的 CSS 类 添加到您创建的元素中。