ionic-使用高德地图javascript api

前言

• 去这里注册成为高德个人开发者并登录高德开放平台
• 如下图,高德地图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上添加地图

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

• 在一个.html创建一个div

页面上添加有一个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