1

我正在使用 MapBox GL JS 创建地图。我在 index.html 页面上创建了一个地图，效果很好，但现在我试图在单独的页面上创建另一个地图，并且在引用地图应该去的 div 时，我收到一个错误：

未捕获的类型错误：无法读取 null 的属性“classList”。

我不确定为什么会发生这种情况，因为我在 html 中创建了元素，并且我的 javascript 与在 index.html 页面上成功创建第一个地图的 javascript 相同（但在不同的 div 上）。我在 Node.js 中执行此操作，并将 webpack 捆绑到 main.min.js 文件中，我在 index.html 和第二个 html 页面上都引用了该文件。

"use strict"
//here is the MapBox GL JS code at the point the error references in the console
 //_setupContainer: function() {
   //     var container = this._container;
     //   container.classList.add('mapboxgl-map');

// here is my mapbox new map creation 

const ACCESSTOKEN = < my access token >;
mapboxgl.accessToken = ACCESSTOKEN;
const map2 = new mapboxgl.Map({
  container: 'map2', 
  style: 'mapbox://styles/mapbox/dark-v9',
  center: [0,0], 
  zoom: 8.5, 
  pitch: 45, 
  bearing: 27,
  hash: false
});
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Mapbox example</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />		
   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
   <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.1.0/mapbox-gl-geocoder.css' type='text/css' />		
   <link rel="stylesheet" type="text/css" href="css/styles.css">
 </head>
  <body>
    <div id="container">
      <div id="map2"></div>	
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js">    </script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.1.0/mapbox-gl-geocoder.js'></script>
<script type="text/javascript" src="./js/main.min.js"></script>
  </body>
</html>

4

1 回答 1

2

此错误表示缺少应该包装mapbox-gl 画布的div 容器。

这是一个重现问题的示例：https ://jsfiddle.net/kmandov/y933wwys/ （您可以在 Web 控制台中看到错误）

var map = new mapboxgl.Map({
  container: 'map2', // <- missing div!
  style: 'mapbox://styles/mapbox/light-v8',
  center: [12.338, 45.4385],
  zoom: 1
});

您可以看到map2缺少 id 的 div。如果您替换map2为map（现有 div 的 id），则地图将按预期显示。

在你的情况下，我会验证 div map2 当时是否存在，你初始化地图。也许这与您捆绑应用程序的方式有关。

于 2016-05-26T08:29:34.710 回答