前言

去这里注册成为高德个人开发者并登录高德开放平台
如下图,高德地图API分web端、Android平台、IOS平台,还不熟悉高德开发平台的同学请先花半天时间浏览一下
本博文主讲在app上使用web端api,如果需要精确定位和导航功能可以看这里
特别强调:在做ionic App使用使用高德地图功能时,只有定位和导航需要使用高德android和ios api,其余的地图功能均使用avascript api.由于已有封装好的定位和导航插件,所以基本上只需要熟读javascript api就够了,点这里查看高德javascript api示例

申请key

必看JavaScript API入门指南
去控制台申请web端key,点击控制台右上角的创建应用按钮,创建一个应用,应用名一般和项目名相同,然后在添加一个__web端__key,如下图

创建一个应用

添加一个web端key

生成了web端key

在app上添加地图

复制如下代码到appindex.html页面的<head>标签中,如下图

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的高德地图web端key"></script>

在一个.html创建一个div

<ion-content>
  <div #map_container class="map_container"></div>
</ion-content>

页面上添加有一个div

设置div宽高为100%

page-home {
  .map_container {
    width: 100%;
    height: 100%;
  }
}

设置div宽高为100%

如下图,创建对图对象

  import {Component, ViewChild, ElementRef} from '@angular/core';

  declare var AMap;

  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
    @ViewChild('map_container') map_container: ElementRef;
    map: any;//地图对象

    constructor() {
    }

    ionViewDidEnter() {
      this.map = new AMap.Map(this.map_container.nativeElement, {
        view: new AMap.View2D({//创建地图二维视口
          zoom: 11, //设置地图缩放级别
          rotateEnable: true,
          showBuildingBlock: true
        })
      });
    }

  }

创建对图对象

执行ionic serve启动app,就可以看到地图啦

显示地图

完善地图

完善后的app如下图,完整代码已上传至github

完善后的功能.gif

ionic-使用高德地图javascript api

ionic-使用高德地图javascript api

前言

申请key

在app上添加地图

完善地图

推荐阅读更多精彩内容