css - AGM map 打印显示打印输出中存在间隙

Question

从 chrome 打印我的 Angular AGM map 时，我在 map 上看到了这个巨大的灰色间隙:

如您所见，不仅那里有灰色条(如果我关闭“背景图形”，它会变成白色)，而且还会将其下方的 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;
}

注意:确保您点击了打印按钮以查看问题

如果您想修改我损坏的代码，我已经包含了一个指向 StackBlitz 的链接: StackBlitz Link

关于我的问题的其他信息:

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

Answer 1

添加显示和宽度属性

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

检查这个stackblitz

希望这就是您要找的。