Ionic2系列——在Ionic2中使用高德地图

本篇文章主要介绍Ionic2系列——在Ionic2中使用高德地图,文章内容主要包括关于Ionic2,使用地图高德等,下面开始文章正文。

之前讲过了如何在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中使用高德地图

关于Ionic2系列——在Ionic2中使用高德地图的主要内容就介绍到这儿,文章由web开发乐园收集自网络,希望对您有参考价值。

您可以选择一种方式赞助本站

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: