之前讲过了如何在Ionic2中使用第三方库,因为第三方库必须针对TypeScript提供相应的声明文件——即d.ts文件,才能被TypeScript正确识别并编译。好在大多数的第三方库已经有了定义文件,可直接通过以下命令安装:

npm install @types/theLibraryName --save

这样就可以解决大多数第三方库的引入问题,如上一篇博客中提到的ECharts组件。

那么如果某个第三方库没有对应的d.ts怎么办呢?除了自己手写d.ts之外,TypeScript也提供了一种比较宽泛的方式来识别js代码中的变量及方法,但是缺点是失去了智能感知的特性。比如要使用高德地图的SDK,经查看高德地图的文档:http://lbs.amap.com/api/javascript-api/summary/ ,发现使用方法是这样的:

第一步,注册高德开发者;第二步,去控制台创建应用;第三步,获取Key。

接下来需要引入高德地图SDK的JS:

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

这个js是动态加载的,npm中也没有对应的d.ts,如果按照文档下面的步骤直接使用AMap对象,就会编译失败,找不到这个对象。所以在使用AMap之前,必须声明它。下面演示一下在Ionic2中使用高德地图SDK的方法。

一、新建Ionic2应用并引入高德JS

首先新建一个Ionic2应用。使用以下命令来创建一个新项目:

ionic start MapDemo --v2

打开src目录下的index.html, 在head标签中添加以下代码,引入js:

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

注意,该js必须放在以下代码的前面:

<script src="build/main.js"></script>

不然在使用的时候还没找到AMap对象,还是会报错。

二、创建地图容器

打开home.html,在home页面里你想展示地图的地方创建一个div 容器,并指定id标识:

<div id="container"></div> 

给地图容器指定大小,可以使用CSS为地图容器设置合适的大小,比如:

#container {width:300px; height: 180px; }

也可以直接写:

<div id="container" style="height: 600px;"></div>

三、声明AMap对象并创建地图

打开home.ts,在构造函数前添加一个变量:

public map: any;

TypeScript中any真是个很有用又没那么好用的东西,任何不知道具体类型的东西都可以声明为any类型,但是这样就失去了智能感知的特点。没办法这里只能声明为any了。接下来添加一个loadMap方法:

loadMap() {
this.map = new AMap.Map('container', {
resizeEnable: true,
zoom: 8,
center: [116.39,39.9]
});
}

并调用该方法:

ionViewDidLoad() {
this.loadMap();
}

如果这时候编译的话,就会报错,找不到AMap对象,TypeScript不认识这个东西。所以需要对其进行声明。

打开src目录下的declarations.d.ts文件,这里就是写类型定义的地方,里面有一段注释,大意如下:

声明文件是TypeScript编译器如何知道一个对象的类型的方式。它们将让TypeScript认识所有的代码并提供智能感知。

下面声明的通配符* 模块允许在App中使用第三方库,即使它们没有提供类型声明文件。

我们可以把高德JS的声明写在这里。在下面添加以下代码:

declare var AMap;

即可正常显示地图了:

Ionic2系列——在Ionic2中使用高德地图的更多相关文章

  1. Vue-Cli 3.0 中配置高德地图

    vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存 ...

  2. Vue组件篇——Vue3.0中使用高德地图

    VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...

  3. reactjs中使用高德地图计算两个经纬度之间的距离

    第一步下载依赖 npm install --save react-amap 第二步,在组件中使用 import React, { Component } from 'react' import { L ...

  4. react中使用高德地图的原生API

    干货,无话 1.react-create-app,创建新react项目 2.npm install react-amap,引入高德地图的封装 3.编写组件index.js import React f ...

  5. vue-cli2.X中引入高德地图,将其设为全局对象

    平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key ...

  6. 在vue中使用高德地图vue-amap

    1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap. ...

  7. 在vue中使用高德地图开发,以及AMap的引入?

    百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...

  8. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

  9. android: 在APP中显示高德地图SDK

    一.搭建环境 参考资料:http://lbs.amap.com/api/android-sdk/guide/create-project/android-studio-create-project  ...

随机推荐

  1. ubuntu下的apache的虚拟主机的配置

    ubuntu下的虚拟主机的配置相对window下的虚拟主机配置有些许不同. 对于要新建的虚拟主机,我们可以有如下几个步骤: 1.在/etc/apache2/sites-available/目录下新建一 ...

  2. C#的StringBuilder 以及string字符串拼接的效率对照

    今天公司一个做Unity3d的人在说字符串拼接的一个效率问题,他觉得string拼接会产生新的一个内存空间,假设不及时回收会产生大量的碎片,特别是在Unity3d这样一个Updata环境下,由于每一帧 ...

  3. DbUtility Ex

    扩展 DbUtility (1) 2014-05-22 21:48 by Ivony..., 234 阅读, 3 评论, 收藏, 编辑 本文原始路径: https://www.zybuluo.com/ ...

  4. 建立Ftp站点

    建立Ftp站点步骤: 1.首先创建一个用户 我的电脑右键->管理->本地用户和组->用户->“右键”新建用户->输入用户名和密码再点创建就行了! 2.其次是在C盘新建文件 ...

  5. 【GitHub】在Mac上配置/使用Github

    以前一直听说过Github,但是自己一直不会用.最近不是太忙,于是想捣鼓捣鼓Github,没想到用了将近3个小时,才在Mac上配置成功. 首先简单介绍一下Git和Github 集中化的版本控制系统( ...

  6. 【转】Objc的底层并发API

    本文由webfrogs译自objc.io,原文作者Daniel Eggert.转载请注明出处! 小引 本篇英文原文所发布的站点objc.io是一个专门为iOS和OS X开发者提供的深入讨论技术的平台, ...

  7. javascript闭包1

    javascript闭包 在学习javascript闭包之前,需要先了解一下"作用域链". 每一段javascript代码都有一个与之关联的作用域链(scope chain),这个 ...

  8. IOS使用不同父类的 view 进行约束

    最终效果图如下: 很多限制条件都已经应用到了视图中,我们在解释一下: ·在我们的视图控制器的主视图中有两个灰色的视图.两个视图距视图控制器的视图左 边和右边都有一个标准的空白距离.视图的顶部距顶部的视 ...

  9. API HOOK库

    API HOOK库 API HOOK有两种做法,一种是SetWindowHookEx,简单易用,但如果做其它的HOOK,如HOOK OpenProcess,就需要修改内存地址了,内存地址可以通过Wri ...

  10. java正则表达式验证标点符号

    统计标点符号个数 String str = "\""..,!,"; int count = 0; Pattern pattern = Pattern.compi ...