Uncaught ReferenceError: mapboxgl is not defined

Question

我在控制台中收到以下（链接）错误消息。我花了几个小时尝试解决此问题，但无法跟踪此问题。有人可以帮我解决这个问题吗？

我无法在网页上显示地图代码是正确的，但不知道哪里出了问题。 如果有人能用代码详细解释就太好了。这样我就可以记住并用作将来的参考

这里是主代码，后面是连接代码

//Pug Code
doctype html
html
  head 
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0' value="script-src 'self' api.mapbox.com")
      link(rel='stylesheet' href ='/css/style.css')
      link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
      title Natours | #{title}

  body
    //HEADER
    include _header

    //CONTENT
    block content 
      h1 This is a placeholder heading

    //FOOTER
    include _footer

    script(src='/js/mapbox.js')

================================================= =====================================

Js code

/* eslint-disable */
const locations = JSON.parse(document.getElementById("map").dataset.locations);

mapboxgl.accessToken = 'xxxxxx';
var map = new mapboxgl.Map({
    container: 'map',
    style:'mapbox://styles/mapbox/streets-v11',,
});

================================================= ================================

//To display the map on  website below code is related to above code(this '==========' is only to show separate code from different file) //

  section.section-map
    #map(data-locations=`${JSON.stringify(tour.locations)}`)

Answer 1

你忘了添加他们的图书馆。

 head 
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0' value="script-src 'self' api.mapbox.com")
      link(rel='stylesheet' href ='/css/style.css')
      link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
    
      //- add this line
      script(src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js')
    
      title Natours | #{title}