Come aggiungere Bing Maps v8 ad Angular 2.0?

Desidero aggiungere il controllo Bing Map V8 al mio progetto Anguar 2.0. Voglio sapere cosa devo fare per aggiungere Bing Map V8 al progetto Angular 2.0. Ho allegato la mia implementazione. Il componente che ho creato non può essere caricato. Come faccio a consultare Microsoft.Maps.Map?Come aggiungere Bing Maps v8 ad Angular 2.0?

Ecco un esempio di bing map v8. Tutto funziona bene se si salva il seguente esempio in formato HTML. La chiave della mappa di bing è stata ritagliata.

<!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>

Il suo è il file che ho creato come map.component.html.

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

Ecco il file che ho creato come map.component.ts.

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

fonte

2016-05-31 tonyjy

Che dire angolare 2 vi impedisce di inclusa una mappa di Bing? –

Come diavolo hai avuto questa impressione? Ti sto chiedendo perché non puoi usare una mappa Bing come con Angular 2. Di cosa si tratta Angular 2 che attualmente rende difficile avere una mappa Bing sul tuo sito? –

Questa è un'altra domanda su AnguarJS 2. Come faccio a racchiudere Bing Map come componente di AngularJS 2? Dove posso aggiungere la funzione loadMapScenario e trovare il riferimento per Microsoft.Maps.Map? – tonyjy

il codice è quasi ok, basta qualche modifica

1- nel index.html rimuovere la funzione di callback e il 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>

Inoltre index.html , rimuovere il parametro callback da th e importazione di script.

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

essere:

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

Ora, avete lo script caricato, tutto quello che dovete fare è creare la mappa nel componente

@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

fonte

2016-05-31 19:43:51 Abdulrahman

@tonyjy è necessario importarlo 'import {ViewChild} da '@ angular/core'' – Abdulrahman

Grazie a @Abdulrahman. Funziona! – tonyjy

Questo mi dà un 'errore TS2663: Impossibile trovare il nome 'Microsoft'. – cocoseis

Esiste uno sforzo comunitario per creare direttive Angular2 per Bing Maps. Ancora in versione alpha, ma una demo di base può essere trovato qui: http://ng2-bingmaps.azurewebsites.net/

repo GitHub è qui: https://github.com/youjustgo/ng2-bingmaps

fonte

2016-06-04 09:37:50 Boland

I collegamenti sono interrotti – carrizal

Sì, è stato rimosso @carrizal. – Boland

Inizialmente ho provato la risposta accettata e corse in questione alcune persone avevano nei commenti dove al momento del carico 'prototipo' era nullo.

Inizialmente ho risolto questo problema utilizzando un try/catch con un setTimeout nel catch che avrebbe tentato di caricare bing dopo un secondo. Questo ha funzionato, ma è stata una soluzione molto sciatta.

Eventualmente ho cercato come le persone caricassero Google Maps in modo angolare per vedere se esisteva una soluzione migliore. Per fortuna c'è e usa le promesse.

La soluzione che ha funzionato per me è stata trovata qui nella risposta this. Pieno credito per questo va a loro.

Innanzitutto creare un servizio per caricare il tuo mappa ...

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

Nel componente genitore al componente che contiene l'elemento bing mappa avere questo codice ...

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

Inoltre, nel modello del componente padre hanno questo codice che impedirà l'inizializzazione del componente mappe bing finché non è pronto.

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

Ora, nel bing-map.component stesso vogliamo aspettare fino a quando il componente è nel DOM prima di caricare la mappa.

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

E, infine, si carica la mappa bing nella bing-map.component

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

fonte

2017-11-06 16:30:46 Dylan

Come aggiungere Bing Maps v8 ad Angular 2.0?

risposta

Problemi correlati