mapboxgl：创建地图但不显示它

Question

我正在学习如何使用 mapboxgl 并正在查看网站上的示例，但找不到关于如何在不显示地图的情况下创建地图的示例。有没有办法做到这一点？显示的例子是：

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v8',
    center: [-103.59179687498357, 40.66995747013945],
    zoom: 3,
});

但是，我只是想先创建地图，但还没有真正显示它，直到我以后要使用它。当我在创建 mapboxgl 对象时取出 "container" 字段时，api 给我一个错误，因为它试图在我的 html 页面中查找容器（尽管它不存在，因为我还不想显示):

Uncaught TypeError: Cannot read property 'classList' of null

Answer 1

当您调用 mapboxgl.Map 构造函数时，它将在您作为参数传入的 container 中创建 WebGL canvas 元素。所以你需要传入一个有效的容器id。

要控制地图的可见性，您可以 show/hide 容器 div。

#map {
   display: none;
}

然后显示地图：

document.getElementById('#map').style.display = 'block';

mapboxgl：创建地图但不显示它

mapboxgl: create a map without displaying it

javascript

mapbox

mapbox-gl

mapbox-gl-js