Question

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

共有三张地图，它们在this page上都显示正常。 here是我要复制到其他地方的页面的有效示例，仅使用其他地图。但是，是否在this page上加载地图？

这是我正在使用的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更改为与我希望显示的位置匹配。

我希望看到格洛斯特和Brimscombe像斯特劳德一样装载吗？

控制台日志显示

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

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

Answer 1

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

您看到的错误是因为this page上没有div或stroud的{{1}}标记，因此Mapbox不知道在哪里渲染地图。

如果您转到the stroud clinic page，则会注意到brimscombe和briscombe出错，因为这两个gloucester都不存在。

编辑：

如果您不想看到错误，可以进行a few different ways的操作，但是我会这样做：

div

您也可以为其他两个重复该模式。除非您愿意，否则无需提供// Checking if the element stroud exists if (!!document.getElementById('stroud')) { // If it does, run the stroud code }。

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

1 个答案: