mapboxgl：创建一个不显示它的地图

Question

我正在学习如何使用mapboxgl，并且正在查看网站上的示例，但无法找到有关如何创建地图而不显示地图的示例。有办法做到这一点吗？显示它的示例是：

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

但是，我只是想先创建地图，但实际上还没有显示它，直到我想稍后再使用它。当我取出＆＃34;容器＆＃34;在创建mapboxgl对象时，api给了我一个错误，因为它试图在我的html页面中查找容器（虽然它不存在，因为我不想显示它）：

Uncaught TypeError: Cannot read property 'classList' of null

Answer 1

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

要控制地图的可见性，您只需显示/隐藏容器div。

#map {
   display: none;
}

然后显示地图：

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