无法使用带有 pug 的 mapbox 显示地图

Question

enter image description here

如上所示的标题和图片，我无法在我的网站上显示地图。我四处寻找解决方案，但 none 与我的相似。需要注意的一件事是我正在使用 pug（在 HTML 中编写 JS 的模板）。这是下面显示的 JS 的代码

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

mapboxgl.accessToken = 'xxxxxx';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'xxxxxxx',
    center: [-118.315192, 34.006905],
    zoom: 10
});

这是我用来实现顶部代码以在我的网站上显示地图的代码。

    section.section-map
        //- Data-location set in dataset in mapbox.js
        #map(data-locations=`${JSON.stringify(tours.locations)}`)

这是我的主要内容

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;")
            title Natours | #{tours.name} Tour
            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')

    body
        // HEADER

        include _header
        
        // CONTENT

        block content
            h1 This is a placeholder heading

        // FOOTER

        include _footer
            script(src="/js/mapbox.js")

Answer 1

您在 header 上设置的内容安全策略似乎有问题..

在元标记中添加以下代码。

script-src 'self' api.mapbox.com;

了解更多信息Read Content Security Policy

因为 OP 使用第三方 npm 模块 helmet ...

现在您可以按如下方式禁用头盔中的 CSP..

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

更多阅读文档Helmet Docs

Answer 2

您有一个内容安全策略 Header 丢失了，只需将此元标记放入 header 它对我有用

<meta http-equiv="Content-Security-Policy" content="script-src 'self' api.mapbox.com;worker-src blob: ;connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com">

无法使用带有 pug 的 mapbox 显示地图

Unable to display map using mapbox with pug

javascript

node.js

mapbox

pug