AGM 地图打印显示打印输出中的间隙答案

【问题标题】：AGM Map printing shows gap in printoutAGM 地图打印显示打印输出中的间隙
【发布时间】：2019-03-08 02:58:58
【问题描述】：

从 chrome 打印我的 Angular AGM 地图我在地图中看到了这个大的灰色间隙：

如您所见，那里不仅有灰色条（如果我关闭“背景图形”，它会变成白色），而且它还会将其下方的地图图像向下移动

以下是重现此问题所需的简单代码：

app.component.ts：

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <button (click)="clickPrint()">print</button>
        <agm-map id="Gmap" [latitude]="34.051759" [longitude]="-118.244576" [zoom]="17"></agm-map>
        `,
    styles: [`
        agm-map {
            height: 800px; //height: 100%;
        }
        button {
            position: absolute;
            z-index: 10;
        }
    `]
})
export class AppComponent {
    clickPrint() {
        print()
    }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core'

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AgmCoreModule.forRoot(/*{
            apiKey: 'YOUR_API_KEY'
    }*/),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

styles.css：

html, body {
    margin: 0px;
    height: 100%;
    overflow: hidden;
}

注意：请务必点击Print 按钮查看问题

我提供了一个 StackBlitz 的链接，以防你想修改我损坏的代码： StackBlitz Link

围绕我的问题的其他信息：

我没有对这个演示做任何花哨的事情，它只是一个 Angular AGM 地图，我正在尝试打印它。
如果我更改缩放或平移，打印时地图中的间隙大小会波动，但我希望某种 css 技巧能帮助我完全消除它。非常感谢您的帮助！

【问题讨论】：

我对 AGM 不是很熟悉，但我建议您尝试将地图高度设置为 px 而不是百分比。似乎可以与您提供的 StackBlitz 一起使用。或者，您应该找到一种在打印时触发地图调整大小的方法。
@MrUpsidown 很抱歉，但这并不能解决我的问题，我确实说过，如果您更改缩放等，它会改变间隙的大小，但它永远不会消失。我什至在来自 github 的官方 stackblitz 上测试了这个故障：stackblitz.com/edit/angular-google-maps-demo 如果你打开右边的控制台，然后输入 print()，你会看到完全相同的问题，他们的演示实际上很难编码为 300 像素。
@MrUpsidown 我已经更新了我的代码以使用 px 作为高度而不是百分比，它还显示了差距。有可能你让它工作了一次，因为我已经能够让它在一个缩放比例下随机消失，但是没有什么能像我需要的那样在任何地方工作。
@MrUpsidown 谢谢你的帮助，这是个好主意，我现在愿意接受任何想法！
是的，很抱歉，但我认为我不会在这方面提供更多帮助。打印总是很棘手。即使您找到适合您的高度，它也可能不适用于其他人，具体取决于打印机/纸张设置、边距等。不过可能值得一看 this answer。

标签： css angular google-maps-api-3 printing angular-google-maps

【解决方案1】：

添加display和width属性

    agm-map {
        height: 800px;
        width:800px;
        display:inline-flex;
    }

检查这个stackblitz

希望这就是您想要的。

【讨论】：

@t-shashwat 很抱歉，但我尝试了inline-flex（在您的 stackblitz 演示中，修改了我自己的演示和我的应用程序），虽然它确实修复了特定的 800x800 打印输出，遗憾的是它并没有像我需要的那样为 all 缩放级别修复它。当我尝试在我的应用程序中实现它时，它仍然存在差距。但是，我还没有放弃，我将在明天的 stackblitz 演示中进一步调查它，并验证它是否真的仍然被破坏。如果我发现我无法通过缩放或平移来破坏它，那么我会确定并标记您的答案并给予您信任。
@t-shashwat 我有一种感觉，对于所有场景，我真正解决这个问题的唯一方法可能是编写一个函数来翻转地图图块并检查它们，或者，如果我想太过分，我可以进入实际的源代码，看看我是否能找到导致这个错误的原因。我已经找到了一种使用 css 选择和偏移特定行的 div 的方法，但我需要它是可靠的，而且我还没有看到这种情况发生，我还有很多工作要做。无论哪种方式，我都会在这里报告我的发现。感谢您的尝试，非常感谢！
@Jared 嗨，我尝试了 1000x1000、500x500 和缩放为 10、20、30，对于这些情况，打印也按预期工作。如果您说出可以重现该问题的数字，那就太好了。通常 CSS 修复不是永久性的，所以如果你有一些编码方法来修复它，请告诉我。谢谢:)

【解决方案2】：

如果有人在 2020 年仍在寻找答案，那么此解决方法对我有用。在您的@media 打印部分添加此 css。

在这里看到：https://bugs.chromium.org/p/chromium/issues/detail?id=426294

#map_canvas div > img {
  position: absolute;
}

.gm-style div > img {
  position: absolute;
}

【讨论】：