在 Ionic2 TypeScript 项目中导入第三方 JS 库

最新推荐文章于 2020-11-06 11:25:52 发布

原创最新推荐文章于 2020-11-06 11:25:52 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Ionic2 TypeScript项目中集成百度地图JS SDK，并通过全局变量声明及HTML页面引用实现地图功能。

原文发表于我的技术博客

本文分享了在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%}

Ionic - 地图