Mapbox是否未在所有页面上加载？

Question

Mapbox在整个网站上都在使用，但是，不是在两个特定页面上加载吗？

一共有三张地图，在此页面上都可以正常显示。 这是我要复制到其他地方的页面的有效示例，仅使用不同的地图。 但是， 此页面上的地图无法加载吗？

这是我使用的javascript，每个地图都有不同的var ， stroud ， gloucester和brimscombe 。

mapboxgl.accessToken = 'validtokenhere';

// STROUD
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Stroud clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.248550,
                    51.741290
                ]
            }
        },
    ]
};

var stroud = new mapboxgl.Map({
    container: 'stroud',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.248550,51.741290],
    zoom: 13
});

// disable map zoom when using scroll
stroud.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(stroud);
});

// GLOUCESTER
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Gloucester clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.248140,
                    51.870560
                ]
            }
        },
    ]
};

var gloucester = new mapboxgl.Map({
    container: 'gloucester',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.248140,51.870560],
    zoom: 13
});

// disable map zoom when using scroll
gloucester.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(gloucester);
});

// BRIMSCOMBE
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Brimscombe clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.063020,
                    51.892550
                ]
            }
        },
    ]
};

var brimscombe = new mapboxgl.Map({
    container: 'brimscombe',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.063020,51.892550],
    zoom: 13
});

// disable map zoom when using scroll
brimscombe.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(brimscombe);
});

然后每个容器是

<section class="location-map-image">
  <div id="stroud" class="map" style="width: 100%; height: 263px;"></div>
</section>

显然，div ID更改为与我希望显示的位置匹配。

我期望看到格洛斯特（Gloucester）和Brimscombe像Stroud一样装载吗？

控制台日志显示

Error: Container 'stroud' not found. map.js:337:22
    r map.js:337
    <anonymous> app-min.js:12508

因此，当找不到div id stroud时，脚本似乎卡住了。 当我只想展示gloucester或brimscombe怎么brimscombe ？

Answer 1

TL：DR; 地图没有HTML元素可呈现

您看到的错误是因为此页面上没有stroud或brimscombe的ID的div标签，因此Mapbox不知道在哪里渲染地图。

如果转到著名的诊所页面 ，您会注意到briscombe和gloucester会出错，因为这两个div都不存在。

编辑：

如果您不想看到错误，可以通过几种不同的方法来完成，但是我会这样做：

// Checking if the element stroud exists
if (!!document.getElementById('stroud')) {
  // If it does, run the stroud code
} 

您也可以为其他两个重复该模式。 除非您愿意，否则无需提供else 。