在 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%}
Ionic - 地图
<div #container id="container" class="mapContainer">
在 Ionic2 TypeScript 项目中导入第三方 JS 库的更多相关文章
- 如何在Ionic2项目中使用第三方JavaScript库
onic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库. 因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东 ...
- 在Pycharm中导入第三方模块库(诸如:matplotlib、numpy等)
在Pycharm中导入第三方模块库 一.打开pycharm: 二.点击菜单上的“file” -> “setting”: 三.步骤二完成后出现界面如下所示.选中你的项目(比如thisyan Pro ...
- Python中导入第三方声源库Acoular的逻辑解释以及Acoular的下载
[声明]欢迎转载,但请保留文章原始出处→_→ 秦学苦练:http://www.cnblogs.com/Qinstudy/ 文章来源:http://www.cnblogs.com/Qinstudy/p/ ...
- 【微信小程序】在js中导入第三方js或自己写的js,使用外部js中的function的两种方法 import和require的区别使用方法 【外加:使用第三方js导出的默认function的调用方法】
如下 定义了一个外部js文件,其中有一个function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync( ...
- 在 Angular 2 Component 中使用第三方 JS 库
本文所有内容以 Angular 2 Quick Start 项目为基础,使用 TypeScript 语言. 如上图,最近遇到一个需求,需要在一个刚启动的 Angular 2 项目中使用 snap.sv ...
- vue 中引入第三方js库
以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...
- vue-cli项目中引入第三方插件
前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...
- 详细地jsoncpp编译方法 和 vs2010中导入第三方库的方法
详细地jsoncpp编译方法 和 vs2010中导入第三方库的方法 一 编译链接 1 在相应官网下载jsoncpp 2 解压得到jsoncpp-src-0.5.0文件 3 打开jsoncpp-src- ...
- Android Studio中导入第三方库
之前开发Android都是使用的eclipse,近期因为和外国朋友Timothy一起开发一款应用,他是从WP平台刚切换使用Android的,使用的开发环境时Android Studio,为了便于项目的 ...
随机推荐
- 用Python实现数据结构之栈
栈 栈是最简单的数据结构,也是最重要的数据结构.它的原则就是后进先出(LIFO),栈被使用于非常多的地方,例如浏览器中的后退按钮,文本编辑器中的撤销机制,接下来我们用Python来具体实现这个数据结构 ...
- Resct配置less
配置less 安装less-loader yarn add less-loader 打开 webpack.config.dev.js 和 webpack.config.prod.js 找到 test ...
- 简单规划dp sumsets
Farmer John commanded his cows to search for different sets of numbers that sum to a given number. T ...
- PAT A1143 Lowest Common Ancestor (30 分)——二叉搜索树,lca
The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...
- mysql试题
drop,delete与truncate的区别:优先级: drop > truncate > deleteTRUNCATE 按行删除并不把删除操作记录记入日志保存(不可恢复)DELETE ...
- 【UVA 11404】Palindromic Subsequence
UVA 11404 我用了最暴力的做法:考虑\(dp[i][j]\)表示\(S[i..j]\)的最长回文子序列的长度以及字典序最小的那个. 然后转移的时候如下处理:首先\(dp[i][j]\)要取\( ...
- 【Codeforces Round 1137】Codeforces #545 (Div. 1)
Codeforces Round 1137 这场比赛做了\(A\).\(B\),排名\(376\). 主要是\(A\)题做的时间又长又交了两次\(wa4\)的. 这两次错误的提交是因为我第一开始想的求 ...
- 利用 ProtoThreads实现Arduino多线程处理(1)
转载请注明:@小五义http://www.cnblogs.com/xiaowuyiQQ群:64770604 这几天和群里小V同学讨论一个项目时,偶然发现了 ProtoThreads,简称PT,用其来实 ...
- saltstack学习之一:服务架构以及相关配置安装运行
概要 saltstack是基于Python开发的C/S架构的一款批量管理工具,底层采用动态的连接总线(ZeroMQ消息队列pub/sub方式通信),使用ssl证书签发的方式进行认证管理,使其可以用于编 ...
- AIS系统(转)
船舶自动识别系统(Automatic Identification System, 简称AIS系统)由岸基(基站)设施和船载设备共同组成,是一种新型的集网络技术.现代通讯技术.计算机技术.电子信息显示 ...