mapbox gl js - Uncaught TypeError: Не удается прочитать свойство 'classList' из null

Я создаю карту с MapBox GL JS. Я создал одну карту на моей странице index.html и что работает хорошо, но теперь я пытаюсь создать еще одну карту на отдельной странице и при обращении к DIV, где карта должна идти, я получаю сообщение об ошибке:mapbox gl js - Uncaught TypeError: Не удается прочитать свойство 'classList' из null

Uncaught TypeError: Cannot read property 'classList' of null.

Я не уверен, почему это происходит с момента создания элемента в моем html, и мой javascript идентичен javascript, который успешно создает первую карту на странице index.html (но на другом 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' /> \t \t 
 
    <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' /> \t \t 
 
    <link rel="stylesheet" type="text/css" href="css/styles.css"> 
 
</head> 
 
    <body> 
 
    <div id="container"> 
 
     <div id="map2"></div> \t 
 
    </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>

источник

2016-05-24 Nicholas Gati

Эта ошибка указывает на то, что DIV контейнер, который должен обернуть MapBox-Gl холст отсутствует.

Вот пример, который воспроизводит проблему: https://jsfiddle.net/kmandov/y933wwys/ (Вы можете увидеть ошибки в веб-консоли)

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

Вы можете видеть, что DIV с идентификатором map2 отсутствует. Если вы замените map2 на map (идентификатор существующего div), карта будет отображаться как ожидалось.

В вашем случае я бы удостоверился, что div map2 существует в то время, вы инициируете карту. Возможно, это имеет какое-то отношение к тому, как вы связываете приложение.

источник

2016-05-26 08:29:34 kmandov

mapbox gl js - Uncaught TypeError: Не удается прочитать свойство 'classList' из null

ответ

Смежные вопросы