抓取谷歌地图的屏幕截图时，html2canvas 伪影和不稳定答案

【问题标题】：html2canvas artifacts and inconstancy when grabbing a screenshot of google map抓取谷歌地图的屏幕截图时，html2canvas 伪影和不稳定
【发布时间】：2022-11-28 11:24:02
【问题描述】：

html2canvas 的一些事情是不可预测的：下面是pdf地图的截图。

我正在使用 html2canvas 截取谷歌地图的屏幕截图，然后使用 php 将其放在 pdf 上。

有时 html2canvas 会在靠近中心的地方显示一个浅灰色的褪色矩形（在下图中，该形状位于 DV-2 标记的右侧）。有时它存在，有时它不存在，在所有现代浏览器上都不一致。
大多数情况下，一个或多个标记不会显示标签。在下图中，右侧的蓝色标记没有标记。

在地图上，在截屏之前，灰色的形状不存在，所有标记都有可见的标签。

为什么会发生任何想法/建议？就像我之前提到的，它是不可预测的，有时那个形状不会出现，有时所有的标记标签都是可见的。

我注意到没有标签的标记首先放在地图上（当我使用 console.log() 时）。它发生在 html2canvas 中而不是之后。下面是抓取屏幕截图的vue.js方法。

genAndSubmit() {
            let xCrop = (this.dimensions.vw - this.dimensions.pw) / 2
            this.form.processing = true;
            html2canvas(document.querySelector("#mapWrapper"),
                {
                    useCORS: true,
                    logging: true,
                    width: this.dimensions.pw,
                    x: xCrop,
                    // allowTaint: true,
                    // foreignObjectRendering: true,
                    // imageTimeout: 30000,
                    // scale: 2,
                })
                .then(canvas => {
                    this.form.image = canvas.toDataURL('image/png');
                    this.submit();
                });
        },

【问题讨论】：

标签： javascript google-maps html2canvas

【解决方案1】：

在尝试了不同的事情之后，这是我的解决方案：

靠近中心的矩形- 我在 html2canvas 设置中增加了比例 html2canvas(document.querySelector("#mapWrapper"),{scale: 1.001,})
一些标记标签不可见- 我为标记增加了zIndex:9。
谷歌地图信息窗口不显示内容
- 从信息窗口中移除阴影#mapWrapper .gm-style .gm-style-iw-c {box-shadow: none !important;}
- 使用html2canvas的V1.0.0。在我的测试中，较新的版本不显示信息窗口内容。

【讨论】：

【解决方案2】：

我发现在最新的 (1.4.1) 中，我必须设置溢出值才能正确导出。

.gm-style-iw.gm-style-iw-c {
 overflow: visible;
}

【讨论】：