在 Ionic2 TypeScript 项目中导入第三方 JS 库
本文分享了在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 %}
效果如下。
