Carto 多个地图单个 HTML答案

【问题标题】：Carto multiple maps single HTMLCarto 多个地图单个 HTML
【发布时间】：2017-09-11 19:57:24
【问题描述】：

我需要在同一个 HTML 上显示两个或多个 Carto 地图。第一张地图没有问题，但第二张地图显示不正确。我不明白。正确的方法是什么？这是我的html原型http://pixelius.es/labs/servmet，代码如下：

var mapDimarts;
var mapDimecres;

function servmet(){
    mapDimarts = new L.Map('cartodbDimarts', {
        center: [41.75, 2.18],
        zoom: 7
    });

    mapDimecres = new L.Map('cartodbDimecres', {
        center: [41.75, 2.18],
        zoom: 7
    });

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(mapDimarts);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(mapDimecres);

cartodb.createLayer(mapDimarts, 'https://pixelius.carto.com/api/v2/viz/1f0fd8ee-9c22-4571-8b25-ef549d716c8f/viz.json')
    .addTo(mapDimarts)
    .on('error', function(err) {
  alert("some error occurred: " + err);
});

cartodb.createLayer(mapDimecres, 'https://pixelius.carto.com/api/v2/viz/6f8ec189-c208-4c5f-9aa2-6cc9ebbc52ac/viz.json')
    .addTo(mapDimecres)
    .on('error', function(err) {
  alert("some error occurred: " + err);
});

}

window.onload = servmet;

【问题讨论】：

我也有同样的问题！我正在使用两个地图，但不相关的 JS 文件（也具有不同的 var 名称）。第二张地图已加载，但仅显示为一个图块并且行为非常奇怪！

标签： javascript maps cartodb

【解决方案1】：

地图在地图容器不可见时初始化。所以地图存在，但大小不正确。

我会在选项卡上设置一个触发器，以便在/如果单击选项卡时调整地图大小...

function predicDia(e,a){
   mapDimecres.invalidateSize(true);

【讨论】：

正如对问题的评论中所述，我有同样的问题，但这并不能解决问题。