Zum hinzufügen der Bing Maps-v8 an Angular 2.0?

Ursprünglich habe ich versucht die akzeptierte Antwort und lief in das Problem einige Leute hatten in den Kommentaren, wo Sie beim laden der 'Prototyp' war null.

Ursprünglich habe ich dies Problem gelöst durch die Verwendung eines try/catch-mit einem setTimeout in die zu fangen, die versuchen würde, laden Sie bing nach einem zweiten. Das ging, aber war eine sehr schlampige Lösung.

Schließlich sah ich, wie Menschen geladen Google Maps in eckigen, um zu sehen, ob es eine bessere Lösung. Zum Glück gibt es und verwendet es verspricht.

Die Lösung, die für mich gearbeitet wurde finden Sie hier in diese Antwort. Volle Punktzahl für diese geht zu Ihnen.

Erstellen Sie erst einen Dienst zum laden der Karte...

map-loader-service.service

import { Injectable } from '@angular/core';

const url = 'http://www.bing.com/api/maps/mapcontrol?callback=__onBingLoaded&branch=release';

@Injectable()
export class BingMapsLoader {
    private static promise;

    public static load() {
        //First time 'load' is called?
        if (!BingMapsLoader.promise) {

            //Make promise to load
            BingMapsLoader.promise = new Promise( resolve => {

                //Set callback for when bing maps is loaded.
                window['__onBingLoaded'] = (ev) => {
                    resolve('Bing Maps API loaded');
                };

                const node = document.createElement('script');
                node.src = url;
                node.type = 'text/javascript';
                node.async = true;
                node.defer = true;
                document.getElementsByTagName('head')[0].appendChild(node);
            });
        }

        //Always return promise. When 'load' is called many times, the promise is already resolved.
        return BingMapsLoader.promise;
    }
}

In der übergeordneten Komponente auf die Komponente, enthält die bing-map-element haben diesen code...

import { BingMapsLoader } from './services/map-loader-service/map-loader-service.service';


export class BingMapParentComponent {
    mapReady = false;

    constructor() {
        BingMapsLoader.load()
            .then(res => {
                console.log('BingMapsLoader.load.then', res);
                this.mapReady = true;
        });
    }
}

Darüber hinaus in der Vorlage der übergeordneten Komponente haben, dieser code verhindert, dass die bing-maps-Komponente wird initialisiert, bis es fertig ist.

<app-bing-map *ngIf='mapReady'></app-bing-map>

Nun, in der bing-Karte.Komponente selbst wollen wir warten, bis die Komponente in der DOM vor dem laden der map.

ngOnInit() {
    if (typeof Microsoft !== 'undefined') {
        console.log('BingMapComponent.ngOnInit');
        this.loadMap();
    }
}

Und schließlich laden Sie die bing-Karte in den bing-Karte.Komponente

loadMap() {
    this.map = new Microsoft.Maps.Map(document.getElementById('mapId'), {
        credentials: 'Your Bing Maps Key Here',
    });
}