mapbox gl js - Uncaught TypeError: Eigenschaft 'classList' von null kann nicht gelesen werden

Ich erstelle eine Map mit MapBox GL JS. Ich habe eine Karte auf meiner Seite index.html und das funktioniert gut, aber jetzt versuche ich, eine andere Karte auf einer anderen Seite zu erstellen und wenn die div Referenzierung, wo die Karte gehen sollte, erhalte ich eine Fehlermeldung:mapbox gl js - Uncaught TypeError: Eigenschaft 'classList' von null kann nicht gelesen werden

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

Ich bin nicht sicher, warum dies passiert, seit ich das Element in meinem HTML erstellt habe und mein Javascript ist identisch mit dem Javascript, das erfolgreich die erste Karte auf der Seite index.html erstellt (aber auf einem anderen div). Ich mache das in Node.js und bündle mit Webpack in eine Datei main.min.js, die ich sowohl auf index.html als auch auf der zweiten HTML-Seite referenziere.

"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>

Quelle

2016-05-24 Nicholas Gati

Dieser Fehler zeigt an, dass der div Container, die die MapBox-gl Leinwand wird fehlt wickeln sollte. Hier

ist ein Beispiel, das das Problem reproduziert: https://jsfiddle.net/kmandov/y933wwys/ (Sie den Fehler in der Web-Konsole sehen)

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

Sie können sehen, dass ein div mit id map2 fehlt. Wenn Sie map2 durch map (die ID des vorhandenen Div) ersetzen, wird die Karte wie erwartet angezeigt.

In Ihrem Fall würde ich überprüfen, dass die div map2 zu der Zeit existiert, Sie init die Karte. Vielleicht hat es etwas damit zu tun, wie Sie die App bündeln.

Quelle

2016-05-26 08:29:34 kmandov

mapbox gl js - Uncaught TypeError: Eigenschaft 'classList' von null kann nicht gelesen werden

Antwort

Verwandte Themen