2016-05-15 3 views
3

私は角度2のアプリケーションの内部でammapsを使用しようとしています。 コードを見る私のコンポーネントがライブラリを認識していないことは明らかです。
これが私のファイルは次のようになります。今、私が作るのですか
map.component.html角2でamchartsのammapsを使用するには?

<script src="http://www.ammap.com/lib/ammap.js" type="text/javascript"> </script> 
<script src="http://www.ammap.com/lib/maps/js/worldLow.js" type="text/javascript"></script> 


<div id="mapdiv" style="width: 600px; height: 400px;"></div> 

map.component.ts

import { Component } from '@angular/core'; 

//saw this on another SO article so that 
//typescript does not shout for type not defined 

declare var AmCharts: any; 

@Component({ 
selector: 'newsmap-map', 
templateUrl: 'app/views/map.component.html', 
directives: [], 
styleUrls: ['app/css/map.component.css'] 
}) 

export class MapComponent { 

AmCharts: any; 
//using ngOnint to call the required 
//javascript that I've pulling in the html file 
ngOnInit(){ 
    this.AmCharts = new AmCharts({ 
     makeChart("mapdiv", { 

      "type": "map", 


      "dataProvider": { 
      "map": "worldLow", 
      "getAreasFromMap": true 
      }, 


      "areasSettings": { 
      "autoZoom": true, 
      "selectedColor": "#CC0000" 
      }, 


      "smallMap": {} 
     }) 

    } 
} 

}

この作品? これはguide my ammapsです。

ありがとうございます!

答えて

0

スクリプトタグは角度2のテンプレートでは機能しませんが、非角コードをインデックスHTMLに配置すると効果があります。

コードをAngular 2で使用する場合は、コードをインポートしてStstem.jsで読み込む必要があります。 npmにAmChartsライブラリが必要です。

はこれを見てみましょう: Angular 2 and AmCharts

は、今後の参考のために、あなたが質問を投稿する前に検索エンジンを使用する必要があります。

関連する問題