1. Zuhause
  2. Frage und Antwort
  3. Wie fügt man Bing Maps v8 zu Angular 2.0 hinzu?

Wie fügt man Bing Maps v8 zu Angular 2.0 hinzu?

2016-05-31 12 views
5

Ich möchte meinem Anguar 2.0-Projekt die Bing Map V8-Steuerung hinzufügen. Ich möchte wissen, was ich tun muss, um Bing Map V8 ins Angular 2.0 Projekt hinzuzufügen. Ich habe meine Implementierung beigefügt. Die von mir erstellte Komponente konnte nicht geladen werden. Wie referenziere ich Microsoft.Maps.Map?Wie fügt man Bing Maps v8 zu Angular 2.0 hinzu?

Hier ist ein Beispiel für die Bing Map v8. Alles funktioniert gut, wenn Sie das folgende Beispiel als HTML speichern. Der Bing-Kartenschlüssel wurde abgeschnitten.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>addOneLayerItemHTML</title> 
 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
 
    </head> 
 
    <body> 
 
     <div id='printoutPanel'></div> 
 
     
 
     <div id='myMap' style='width: 100vw; height: 100vh;'></div> 
 
     <script type='text/javascript'> 
 
      function loadMapScenario() { 
 
       var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
 
        credentials: 'My Bing Map Key - I removed here' 
 
       }); 
 
       var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); 
 
       var layer = new Microsoft.Maps.Layer(); 
 
       layer.add(pushpin); 
 
       map.layers.insert(layer); 
 
       
 
      } 
 
     </script> 
 
     <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script> 
 
    </body> 
 
</html>

Her ist die Datei, die ich als map.component.html erstellt.

<div class='panel panel-primary'> 
 
    <div class='panel-heading'> 
 
     {{pageTitle}} 
 
    </div> 
 
    <div id='myMap' style='width: 100vw; height: 100vh;'></div> 
 
</div>

Hier ist die Datei, die ich als map.component.ts erstellt.

import { Component, OnInit } from 'angular2/core'; 
 

 
@Component({ 
 
    selector: 'pm-map', 
 
    templateUrl: 'app/bingmap/map.component.html' 
 
}) 
 

 
export class MapComponent implements OnInit { 
 
    public pageTitle: string = "Map"; 
 
     
 
    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
 
     credentials: 'Bing Map Key - I removed it here' 
 
    }); 
 
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); 
 
    var layer = new Microsoft.Maps.Layer(); 
 
    layer.add(pushpin); 
 
    map.layers.insert(layer); 
 
}

Quelle

2016-05-31 tonyjy

+0

Was Angular 2 Sie einschließlich einer Karte Bing zu stoppen? –

+0

Wie in der Welt haben Sie diesen Eindruck? Ich frage mich, warum Sie nicht einfach eine Bing-Karte verwenden können, wie es bei Angular 2 der Fall ist. Was macht es Ihnen an Angular 2 derzeit schwer, eine Bing-Karte auf Ihrer Website zu haben? –

+0

Dies ist mehr AnguarJS 2 Frage. Wie verpacke ich Bing Map als AngularJS 2-Komponente? Wo kann ich die Funktion loadMapScenario hinzufügen und die Referenz für Microsoft.Maps.Map finden? – tonyjy

Antwort

4

Ihr Code fast ok ist, müssen Sie nur wenige Änderungen

1- in index.html die Callback-Funktion entfernen und die div

<div id='myMap' style='width: 100vw; height: 100vh;'></div> 
<script type='text/javascript'> 
    function loadMapScenario() { 
     var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
       credentials: 'My Bing Map Key - I removed here' 
     }); 
     var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); 
     var layer = new Microsoft.Maps.Layer(); 
     layer.add(pushpin); 
     map.layers.insert(layer); 
    } 
</script>

Auch in index.html , entfernen Sie den callback Parameter von th e Skript importieren.

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

zu sein:

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental' async defer></script>

Jetzt haben Sie das Skript geladen, alles, was Sie tun müssen, ist die Karte in Ihrer Komponente erstellen

@Component({ 
    selector: 'pm-map', 
    template: ` 
    <div class='panel panel-primary'> 
     <div class='panel-heading'> 
      {{pageTitle}} 
     </div> 
     <div #myMap style='width: 100%; height: 500px;'></div> 
    </div>` 
}) 
export class MapComponent implements OnInit { 
    @ViewChild('myMap') myMap; // using ViewChild to reference the div instead of setting an id 
    public pageTitle: string = "Map"; 

    ngAfterViewInit(){ // after the view completes initializaion, create the map 
    var map = new Microsoft.Maps.Map(this.myMap.nativeElement, { 
     credentials: 'Bing Map Key - I removed it here' 
    }); 
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); 
    var layer = new Microsoft.Maps.Layer(); 
    layer.add(pushpin); 
    map.layers.insert(layer); 
    } 
}

check it in this plunk

Quelle

2016-05-31 19:43:51 Abdulrahman

+0

@tonyjy Sie müssen importieren 'Import {ViewChild} von '@ angular/core'' – Abdulrahman

+1

Dank @Abdulrahman. Es klappt! – tonyjy

+1

Das gibt mir einen Fehler TS2663: Kann den Namen "Microsoft" nicht finden. – cocoseis

1

Ich versuchte zunächst die akzeptierte Antwort und lief in das Problem in den Kommentaren hatte, wo von der Last einige Leute "Prototyp" war null.

Ich löste dies zunächst mit einem try/catch mit einem setTimeout im catch, der versuchen würde, bing nach einer Sekunde zu laden. Dies funktionierte aber war eine sehr schlampige Lösung.

Schließlich suchte ich, wie Leute Google Maps in eckigen geladen, um zu sehen, ob es eine bessere Lösung gab. Zum Glück gibt es und es nutzt Versprechungen. Die Lösung, die für mich arbeitete, wurde hier in this Antwort gefunden. Der volle Kredit dafür geht an sie.

Erste einen Dienst erstellen Sie Ihre Karte laden ...

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; 
    } 
}

Im Stammkomponente auf die Komponente, die das bing Kartenelement enthält habe 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; 
     }); 
    } 
}

Zusätzlich in der Vorlage der übergeordneten Komponente haben diesen Code, der verhindert, dass die Bing-Maps-Komponente initialisiert wird, bis sie fertig ist.

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

Jetzt, in dem bing-map.component selbst wollen wir warten, bis die Komponente in dem DOM ist, bevor die Karte geladen wird.

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

Und schließlich, laden Sie die bing Karte in der bing-map.component

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

Quelle

2017-11-06 16:30:46 Dylan

Verwandte Themen

 Verwandte Themen