Question

从铬色打印我的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 Map。
如果我更改缩放或平移，则打印时地图中间隙的大小会波动，但是我希望通过某种CSS技巧可以帮助我彻底消除它。非常感谢您的帮助！

Answer 1

将显示和宽度属性添加到

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

选中此stackblitz

希望这就是您想要的。

Answer 2

如果有人还在寻找2020年的答案，那么此变通办法对我有效。将此CSS添加到您的@media打印部分。

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

#map_canvas div > img {
  position: absolute;
}

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

AGM地图打印显示打印输出中的空白

2 个答案: