Como adicionar o Bing Maps v8 ao Angular 2.0?

Question

May 31, 2016, 05:49 PM

Como adicionar o Bing Maps v8 ao Angular 2.0?

Quero adicionar o controle Bing Map V8 ao meu projeto Anguar 2.0. Quero saber o que preciso fazer para adicionar o Bing Map V8 ao projeto Angular 2.0. Anexei minha implementação. O componente que eu criei não pôde ser carregado. Como faço para fazer referência ao Microsoft.Maps.Map?

Aqui está um exemplo do mapa bing v8. Tudo funciona bem se salvar o exemplo a seguir como HTML. A chave do mapa bing foi cortada.

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

Ela é o arquivo que eu criei como map.component.html.

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

Aqui está o arquivo que eu criei como 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);
}