如何在角度2中使用amcharts的ammaps?

时间:2016-05-15 06:14:08

标签: angularjs module typescript angular ammap

我正在尝试在角度2应用程序中使用ammaps。 查看代码很明显,我的组件不知道库 这就是我的文件的样子:
  map.component.html

<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

谢谢!

1 个答案:

答案 0 :(得分:0)

脚本标记在Angular 2模板中不起作用,但是,您可以将非角度代码放入索引HTML中,它将起作用。

如果要在Angular 2中使用代码,则需要导入它并使用Ststem.js加载它。您只需要在npm找到一个有效的AmCharts库。

看看这个:Angular 2 and AmCharts

为了将来参考,您应该在发布问题之前使用搜索引擎。