Angular：在模式弹出窗口中显示Bing地图

Question

我想使用PrimeNG对话组件在模式弹出窗口中显示BingMap。

要求类似于在必应地图上显示客户位置，但地图应仅在弹出窗口中打开。

所以我决定带PrimeNG对话框，或者有npm软件包ng2-opd-popup。

我的ngOnInIt（）代码。

ngOnInit() {

    if (document.readyState != 'complete') {
        document.onreadystatechange = () => {
            if (document.readyState === 'complete') {
                this.loadMap();
            } else {
                this.ngOnInit();
            }
        }
    } else {
        if (document.readyState === 'complete') {
            this.loadMap();
        }
    }

}

showDialog() {
    this.display = true;
}

loadMap() {

    var location = new Microsoft.Maps.Location(39.993066, -83.000479);

    this.map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'BingKey',
        center: location,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        zoom: 11,
        liteMode: true,
        enableClickableLogo: false,
        showLogo: false,
        showTermsLink: false,
        showMapTypeSelector: false,
        showTrafficButton: true,
        enableSearchLogo: false,
        showCopyright: false
    });

    //Store some metadata with the pushpin
    this.infobox = new Microsoft.Maps.Infobox(this.map.getCenter(), {
        visible: false
    });

    this.infobox.setMap(this.map);

}

<p-dialog header="Customer View" [(visible)]="display" [style]="{width: '300px', height: '200px'}">
  <div id='myMap' style="padding: 0px 0px 0px 10px;" #mapElement>
  </div>
</p-dialog>

我还尝试了ng2-opd-popup。

<popup>
  <div id='myMap' style="padding: 0px 0px 0px 10px;" #mapElement>
  </div>
</popup>

我希望地图应该在弹出窗口中加载，但未显示。

任何人都知道为什么它不显示。