教你如何在IONIC2中引入地图服务

教你如何在IONIC2中引入地图服务

前言

在ionic1中引入地图很好，直接引入地图js库，然后按照官方文档来就行了，但是ionic2使用的是TypeScript，可就没那么顺利了，今天教大家如何在ionic2中使用地图服务，这里选用的是高德。

1.新建高德应用

先进入高德开放平台创建一个应用，先要注册账号，地址是：http://lbs.amap.com

 

2.新建ionic2应用

ionic start ionic2-amap --v2 //...等待完成

3.引入地图

找到index.html，在底部引用地图脚本。<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
 

4.使用地图

1、声明地图

在home.html中加入地图的dom元素。

<ion-content>
  <div #container id="container" cancelable="false" style="width:100%;height:100%"></div>
</ion-content>

在home.ts中声明地图组件declare var AMap;,并导入ViewChild, ElementRef，用来操作视图dom。

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

declare var AMap; //声明地图组建

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    //...
}  

2、创建地图

在ionViewLoaded中创建地图

// 页面加载完成
ionViewDidLoad() {
    this.platform.ready().then(() => {
      this.createMap();
    });
}

createMap()的实现如下

// 创建地图
createMap() {
    console.log("准备创建地图。。。。。")
    var map = this.map;
    // create map
    map = new AMap.Map(this.mapElement.nativeElement, {
      zoom: 11,
      center: [116.4135540000, 39.9110130000]
    });

    // create toolBar
    map.plugin(["AMap.ToolBar"], function () {
      map.addControl(new AMap.ToolBar());
    });

    // create marker
    new AMap.Marker({
      position: [116.4135540000, 39.9110130000],
      map: map
    });
}

运行效果 ionic serve

真机运行
添加android平台：ionic platform add android
打包android应用：ionic build android
部署到android手机：ionic run android

 
部署到真机需要正确配置android开发包，如果没有这个环境的，可在【Tonge移动开发交流群】群共享资源中获取。

本项目示例代码：
https://git.oschina.net/tonge/ionic2-amap

高德地图JavaScript API具体参考文档：
http://lbs.amap.com/api/javascript-api/guide/