前言
- 去这里注册成为高德个人开发者并登录高德开放平台
- 如下图,高德地图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上添加地图
- 复制如下代码到app
index.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
