打印带有标记的地图

Question

我尝试打印带有标记的 MapBox（来自 Chrome 和 Edge 最新版本），但标记被白色区域替换。

为了确保它与我的代码无关，我检查了这个页面：https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons 当我尝试打印它时，我有相同的行为：

Normal web page

在打印模式下（Chrome 这里但在 Edge 中相同）：

Print preview

所以它隐藏了 3 个标记，但也隐藏了底部的 Mapbox 徽标。

知道如何保存图像吗？

谢谢！

Answer 1

在“更多设置”>“选项”下，Chrome 有一个用于打印“背景图形”的选项。取消选中时，任何使用 background-image 属性的 css 元素在打印时都将为空白。

为了解决这个问题，为印刷版添加一个简短的 css 集，其中包括一个伪“之前” class 来插入标记图像和删除正常背景图像的代码“.marker”class:

@media print {
    .marker::before {
        content: url('images/orangepin2.png');
    }
    .marker {
        background-image: none;
    }
}

Print a map with markers