web-dev-qa-db-ja.com

Bing Mapsv8をAngular 2.0に追加する方法は？

Bing MapV8コントロールをAnguar2.0プロジェクトに追加したいと思います。 Bing MapV8をAngular 2.0プロジェクトに追加するために何をする必要があるか知りたいです。実装を添付しました。作成したコンポーネントを読み込めませんでした。Microsoftを参照するにはどうすればよいですか。 Maps.Map？

これは、Bing Mapv8の例です。次の例をHTMLとして保存すると、すべてがうまく機能します。 BingMapキーがクリップされました。

<!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);
}
javascriptangularbing-maps
10
tonyjy

あなたのコードはほとんど大丈夫です、あなたはほんの少しの修正を必要とします

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

このプランクでチェックしてください

7
Abdulrahman Alsoghayer

私は最初に受け入れられた答えを試しましたが、ロード時に「プロトタイプ」がnullであるというコメントで一部の人々が抱えていた問題に遭遇しました。

私は最初、1秒後にBingをロードしようとするcatchでsetTimeoutを指定したtry/catchを使用してこれを解決しました。これは機能しましたが、非常にずさんな解決策でした。

最終的に私は人々がどのようにGoogleマップをangularにロードしたかを調べて、より良い解決策があるかどうかを確認しました。ありがたいことに、それは約束を使用しています。

私のために働いた解決策はここ this answerにありました。これに対する完全な信用は彼らに行きます。

まず、マップをロードするサービスを作成します...

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 map要素を含むコンポーネントの親コンポーネントにこのコードがあります...

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

さらに、親コンポーネントのtemplateには、準備ができるまでbingmapsコンポーネントが初期化されないようにするこのコードがあります。

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

ここで、bing-map.component自体で、コンポーネントがDOMに入るまで待ってから、マップをロードします。

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

最後に、bingマップをbing-map.componentにロードします

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

BingMaps用のAngular2ディレクティブを構築するためのコミュニティの取り組みがあります。まだアルファ版ですが、基本的なデモはここにあります： http://ng2-bingmaps.azurewebsites.net/

Githubリポジトリはここにあります： https://github.com/youjustgo/ng2-bingmaps

2
Boland