如何将 Bing Maps v8 添加到 Angular 2.0？

Question

我想将 Bing Map V8 控件添加到我的 Anguar 2.0 项目中。我想知道我需要做什么才能将 Bing Map V8 添加到 Angular 2.0 项目中。我附上了我的实现。我创建的组件无法加载。我如何引用 Microsoft.Maps.Map?

这里是 bing 地图 v8 的示例。如果将以下示例保存为 HTML，则一切正常。 bing 地图键被剪掉了。

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

她是我创建的文件 map.component.html。

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

这是我创建的文件 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);
}

Answer 1

你的代码基本没问题，只需要稍微修改一下

1-在index.html中删除回调函数和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>

此外，在 index.html 中，从脚本导入中删除 callback 参数。

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

成为：

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

现在，您已经加载了脚本，您需要做的就是在您的组件中创建地图

@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

Answer 2

社区正在努力为 Bing 地图构建 Angular2 指令。仍处于 alpha 版本，但可以在此处找到基本演示：http://ng2-bingmaps.azurewebsites.net/

Github 存储库在这里：https://github.com/youjustgo/ng2-bingmaps

Answer 3

我最初尝试了接受的答案，并运行解决了一些人在评论中提出的问题，其中加载时 'prototype' 为空。

我最初通过在捕获中使用带有 setTimeout 的 try/catch 来解决这个问题，它会在一秒钟后尝试加载 bing。这行得通，但这是一个非常草率的解决方案。

最后我在 angular 中寻找人们如何加载 Google 地图，看看是否有更好的解决方案。值得庆幸的是，它使用了承诺。

在答案中找到了对我有用的解决方案。这完全归功于他们。

首先创建一个服务来加载你的地图...

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

在父组件到包含bing地图元素的组件有这个代码...

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

此外，在父组件的模板中有此代码，这将阻止 bing 地图组件在准备就绪之前被初始化。

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

现在，在 bing-map.component 本身中，我们要等到组件在 DOM 中才加载地图.

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

最后，在 bing-map.component

中加载 bing 地图

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

如何将 Bing Maps v8 添加到 Angular 2.0？

How to add Bing Maps v8 to Angular 2.0?

javascript

bing-maps

angular