添加第 17 个 Mapbox 地图后，光滑的幻灯片放映失败

问题描述

我正在制作一个带有光滑滑块的页面，可以在 MapBox 的地图之间滑动。代码有效，但在我添加第 17 张地图后，第一个不再显示（如果第 18 个添加第 1-2 个不显示......）。我似乎无法在他们的网站上找到免费帐户的限制。有限制或有人知道修复吗？我无法在 JavaScript 中添加循环，因为“容器：”仍会添加第 17 个并且不显示第 1 个。

    mapBoxgl.accesstoken = '...';

    var mapAustria = new mapBoxgl.Map({
        container: 'mapAustria',// container id
        style: 'mapBox://styles/kili02/ckjroahc26vps19paqhy0e1tl',// style URL
        center: [14.763850,47.222536],// starting position [lng,lat]
        zoom: 14.3 // starting zoom
    });

    var mapAustria2 = new mapBoxgl.Map({
        container: 'mapAustria2',lat]
        zoom: 14.3 // starting zoom
    });

    var mapHungary = new mapBoxgl.Map({
        container: 'mapHungary',// style URL
        center: [19.251680,47.581940],lat]
        zoom: 14.3 // starting zoom
    });

    var mapEngland = new mapBoxgl.Map({
        container: 'mapEngland',// style URL
        center: [-1.010697,52.071675],lat]
        zoom: 13.3 // starting zoom
    });

    var mapEngland2 = new mapBoxgl.Map({
        container: 'mapEngland2',lat]
        zoom: 13.3 // starting zoom
    });

    var mapSpain = new mapBoxgl.Map({
        container: 'mapSpain',// style URL
        center: [2.257649,41.568925],lat]
        zoom: 14.3 // starting zoom
    });

    var mapBelgium = new mapBoxgl.Map({
        container: 'mapBelgium',// style URL
        center: [5.970996,50.440195],lat]
        zoom: 13.3 // starting zoom
    });

    var mapMonza = new mapBoxgl.Map({
        container: 'mapMonza',// style URL
        center: [9.289711,45.621617],lat]
        zoom: 13 // starting zoom
    });

    var mapMugello = new mapBoxgl.Map({
        container: 'mapMugello',// style URL
        center: [11.371805,43.997830],lat]
        zoom: 14.3 // starting zoom
    });

    var MapRussia = new mapBoxgl.Map({
        container: 'MapRussia',// style URL
        center: [39.967059,43.408882],lat]
        zoom: 14.3 // starting zoom
    });

    var MapGermany = new mapBoxgl.Map({
        container: 'MapGermany',// style URL
        center: [6.940758,50.333245],lat]
        zoom: 14.3 // starting zoom
    });

    var mapPortugal = new mapBoxgl.Map({
        container: 'mapPortugal',// style URL
        center: [-8.627975,37.231833],lat]
        zoom: 14.3 // starting zoom
    });

    var mapImola = new mapBoxgl.Map({
        container: 'mapImola',// style URL
        center: [11.710237,44.340919],lat]
        zoom: 14.3 // starting zoom
    });

    var mapTurkey = new mapBoxgl.Map({
        container: 'mapTurkey',// style URL
        center: [29.410273,40.956887],lat]
        zoom: 14.3 // starting zoom
    });

    var mapBahrain = new mapBoxgl.Map({
        container: 'mapBahrain',// style URL
        center: [50.513280,26.029234],lat]
        zoom: 14.3 // starting zoom
    });

    var mapBahrain2 = new mapBoxgl.Map({
        container: 'mapBahrain2',lat]
        zoom: 14.3 // starting zoom
    });
    /* if added doesn't work 
    var mapAbuDhabi = new mapBoxgl.Map({
        container: 'mapAbuDhabi',// style URL
        center: [54.611141,24.471118],lat]
        zoom: 14.3 // starting zoom
    });
    */

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）