Клуб API Карт

Печатная версия карты

fil@wbtech.ru
2 марта 2017, 15:22

Добрый день.

Есть карта на странице, эта карта отображается в квадратном контейнере с фиксированными размерами (650рх х 650рх). 
Стоит задача растягивать эту карту на 100% ширины в печатной версии страницы.

При помощи css я растягиваю контейнер в котором находится карта, также я переопределяю фиксированную ширину внутренних контейнеров на 100% (пробовал также 100vw) внутри медиаквериса печати (@media only print). При этом контейнер растягивается, но сама карта остается фикс размера. 
 

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

Внутри карты я вижу canvas, пробовал растягивать его, но при этом нарушаются пропорции и картра растягивается независимо от маркеров.

Подскажите, пожалуйста, как решить эту задачу.

2 комментария
Для начала можно попробовать включить автослежение за контейнером карты (выставить в "always")


Если не сработает можно попробовать вызвать matchMedia и подписаться на полученном MediaQueryList и в обработчике вызвать fitToViewport на контейнере карты.


function handleBeforePrint () {
  myMap.container.fitToViewport();
}


if ('matchMedia' in window) {
window.matchMedia('print').addListener(handleBeforePrint);
} else {
window.onbeforeprint = handleBeforePrint;
}
dimik,
Все получилось с matchMedia, спасибо.