单张地图没有在Wordpress中显示

Question

我在一个简单的HTML页面中正确地使用了传单地图。

当我将HTML页面中的确切地图移动到Wordpress页面模板时，地图图块不再显示。奇怪的是，我使用了一些geoJSON形状，它们显示得很好，但地图本身并没有。这是一个截图

所有相关文件都正确加载，控制台中没有错误。以下是我用来初始化地图的代码：

var map = L.map('map').setView([51.504, -0.021], 17);


L.tileLayer('https://api.tiles.mapbox.com/v4/jeffceriello.mngoo42b/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiamVmZmNlcmllbGxvIiwiYSI6Ikhrakxrd00ifQ.SlVngzIXeS5UPC8UGmy1OA', {
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(map);

function onEachFeature(feature, layer) {
    var popupContent;

    if (feature.properties && feature.properties.title) {
        popupContent = feature.properties.title;
    }

    layer.bindPopup(popupContent);
}

L.geoJson([campus], {

    style: function (feature) {
        return feature.properties && feature.properties.style;
    },

    onEachFeature: onEachFeature

}).addTo(map);

以下是所有文件的屏幕截图：

CSS line 106

leaflet.js第119行

地图脚本121

请帮助，谢谢。

Answer 1

也许某些东西阻挡了mapbox图块？尝试使用OSM层进行验证。用下面的代码替换你的瓷砖图层，看看它是否更好。

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom : 19
}).addTo(map)