谷歌地图上* ngIf的灰色框 [英] google maps grey box on *ngIf

问题描述

我有一个组件.

@Component({
    selector: "panda-map",
    template: `
        <div class="map" [style.height.px]="height">
        </div>
    `
})
export class PandaMapComponent implements OnInit {
    @Input() height: string = "400";
    @Input() scroll: boolean = false;
    map: google.maps.Map;

    constructor(
        private readonly element: ElementRef,
        private readonly logger: NGXLogger) {
    }

    ngOnInit(): void {
        const div = this.element.nativeElement.querySelector("div");
        if (this.map)
            return;

        this.map = new google.maps.Map(
            div,
            {
                zoom: 8,
                center: { lat: -26.1714402, lng: 28.0050053 },
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: this.scroll
            });
        google.maps.event.trigger(this.map, "resize");
        google.maps.event.addListener(this.map, "idle", function () {
            google.maps.event.trigger(this.map, "resize");
        });
    }
}

地图显示在父组件上，如下所示:

The map is shown on a parent component like this:

<div class="pull-left shadow-panel map" *ngIf="address">
   <div>
      <panda-map [height]="400">
      </panda-map>
   </div>
</div>

地址会定期更改.

首次创建地图时，它可以完美运行.如果地址设置为null，然后分配了一个新值来分配地址，则地图只会显示一个灰色框.

The first time the map is created, it works perfectly. If the address is set to null, and then a new value is assigned to address the map just shows a grey box.

如您所见，我尝试了各种刷新机制，但似乎都无法正确刷新地图.

As you can see I have tried various refresh mechanisms, none of which seem to refresh the map correctly.

完整柱塞

Complete Plunker

第一次单击显示/隐藏，将绘制地图.
之后，它只是一个灰色框.

The first time you click show/hide, the map is drawn.
After that it's just a grey box.

推荐答案

角度指令 * ngIf 会删除DOM中的标记.但是您的组件仅执行一次ngOnInit.因此，您的地图无法正确重新初始化.

The angular directive *ngIf removes the tag in your DOM. But your component executes ngOnInit just one time. So your map is not reinit correctly.

您可以使用 [style.display] 代替 * ngIf

  <div class="sh" [style.display]="address ? 'none' : 'block'">
    <panda-map ></panda-map>
  </div>

(我试过了您的助听器，它工作正常)

(I tried on your plunker and it's working right)

这篇关于谷歌地图上* ngIf的灰色框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！