无法使用带有哈巴狗的地图框显示地图

问题描述

作为上面显示的标题和图片，我遇到了在我的网站上显示地图的问题。我四处寻找解决方案，但没有一个类似于我的。要注意的一件事是我正在使用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")

解决方法

您的标题上设置的内容安全策略似乎有问题。

在meta标签内添加以下代码。

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

有关更多信息，Read Content Security Policy

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

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

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

有关更多阅读文档Helmet Docs

您有一个内容安全策略标题丢失只需将此元标记放在对我有用的标题中

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

javascript mapbox mapbox pug