原文发表于我的技术博客本文分享了在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 idcontainer classmapContainer 在 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 idcontainer classmapContainer