AGM地图打印显示打印输出的差距

Question

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

正如你所看到的,不仅是那里的灰色条(如果我关闭"背景图形"它会变成白色),但它也会将地图图像移到它下面

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

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

希望这就是您想要的。