本文分享了在Ionic2 TypeScript 項目中導入第三方 JS 庫的方法，供參考。
原文發表於我的技術博客
1. Typings 的方式
因在 TypeScript 中引用之前的 JS 庫還需要引入對應的類型定義，也就是 .d.ts 文件。對於一些流行的 JS 庫，相應地有了一個 Typings 庫。Typings 庫的作用就是將一些現有的 JS 庫生成好了對應的定義文件，可以通過 Typings 直接加載到項目中。詳細可見 Typings for NPM Packages 。
2. 其他第三方 JS 庫的引用
這里以國內的百度地圖庫作為示例進行說明。
百度地圖在 TypeScript 中是不存在的，所以本文就看看如何在 Ionic2 的 TypeScript 項目中引用。
3. 項目中引用 JS 庫
和一般的引用 JS 庫一樣，直接在項目的 index.html 中引用即可。
這里申請好百度地圖的 key 並引入百度地圖的 JS SDK 文件。
4. 全局對應的定義與使用
在引用了百度地圖 SDK 后，在 console 中發現已經可以讀取到百度地圖中的全局參數定義了。
那么只需要在對應的 TS 文件中定義一個參數即可。
{% codeblock lang:js%}
declare var BMap;
{% endcodeblock %}
定義好后在文件中就可以直接使用百度地圖 JS SDK 的所有功能了。
{% codeblock lang:js%}
import {Component, ViewChild, ElementRef} from '@angular/core';
import {NavController} from 'ionic-angular';
declare var BMap;
@Component({
templateUrl: 'build/pages/map/map.html'
})
export class MapPage {
@ViewChild('container') mapElement: ElementRef;
container: any;
constructor(private navCtrl: NavController) {
}
ionViewLoaded() {
this.loadMap();
}
loadMap() {
var map = new BMap.Map(this.mapElement.nativeElement); // 創建地圖實例
var point = new BMap.Point(116.404, 39.915); // 創建點坐標
map.centerAndZoom(point, 15); // 初始化地圖，設置中心點坐標和地圖級別
//創建小狐狸
var pt = new BMap.Point(116.404, 39.915);
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
var marker2 = new BMap.Marker(pt, { icon: myIcon }); // 創建標注
map.addOverlay(marker2); // 將標注添加到地圖中
}
}
{% endcodeblock %}
對應的 HTML 頁面代碼如下。
{% codeblock lang:html%}
{% endcodeblock %}
效果如下。
