Carto несколько карт одного HTML

Question

Carto несколько карт одного HTML

1

Мне нужно отобразить два или несколько карточных карт в одном HTML. Нет проблем с первой картой, но вторая отображается неправильно. Я этого не понимаю. Какой правильный способ сделать это? Вот мой прототип hpml 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;

Sargasso-400 09 сен. 2017, в 04:07

Источник

0

У меня точно такая же проблема! Я использую две карты, но равнодушные файлы JS (также с разными именами var). Вторая карта загружена, но показывает только одну плитку и ведет себя очень странно!
alexkaessner 22 янв. 2018, в 11:02

Теги:

javascript

maps

cartodb

1 ответ

Ещё вопросы

У меня точно такая же проблема! Я использую две карты, но равнодушные файлы JS (также с разными именами var). Вторая карта загружена, но показывает только одну плитку и ведет себя очень странно!

RedCrusador · Answer 1 · 2017-09-11T09-05-00.000Z

Карта инициализируется, когда контейнер карты не отображается. Таким образом, карта присутствует, но имеет неправильный размер.

Я бы установил триггер на вкладке, чтобы изменить размер карты, когда/если нажата вкладка...

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

Как описано в комментарии к вопросу, у меня та же проблема, но это не исправляет.