谷歌地图* ngIf上的灰色框

时间:2018-02-20 17:18:47

标签: javascript angular google-maps typescript

我有一个组件。

@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");
        });
    }
}

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

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

地址会定期更改。

  

第一次创建地图时,它完美无缺。如果地址设置为null,然后分配一个新值来解决地图,则只显示一个灰色框。

正如您所看到的,我尝试了各种刷新机制,但似乎都没有正确刷新地图。

Complete Plunker

第一次单击显示/隐藏时,将绘制地图 之后,它只是一个灰色的盒子。

1 个答案:

答案 0 :(得分:0)

angular指令 * ngIf 会删除DOM中的标记。但是你的组件只执行一次ngOnInit。因此,您的地图无法正确重新启动。

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

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

(我尝试了你的plunker,它正常工作)