在 Ionic2 TypeScript 项目中导入第三方 JS 库-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: 原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考。原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中引用之前的 JS 库还需要引入对应的类型定义,也就是 .d.ts 文件。

原文发表于我的技术博客

本文分享了在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 - 地图



<div #container id="container" class="mapContainer">


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章