效果图：
1.jpg
代码实现过程：
一、在高德官网注册一个开发账号：高德开放平台
二、创建一个WEB端应用：
gaode.png
三、在src目录下的index.html引入高德js:
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=你注册WEB端应用的KEY"></script>
四、HTML:
<ion-content></ion-content>
<div class="back"><i class="iconfont icon-tuichu" (click)="back()"></i></div>
<div #map_container class="map_container"></div>
<ion-content></ion-content>
五、SCSS：
.map_container{
width: 100%;
height: 100%;
}
六、TS：
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Toast } from '@ionic-native/toast/ngx';
import { Router } from '@angular/router';
declare var AMap;
@Component({
selector: 'app-gaodemap',
templateUrl: './gaodeMap.component.html',
styleUrls: ['./gaodeMap.component.scss'],
})
export class GaodeMapComponent {
@ViewChild('map_container', { static: true }) map_container: ElementRef;
map: any;//地图对象
constructor(private router: Router,
private toast: Toast,) {
}
//进入页面时触发
ionViewDidEnter() {
this.loadMap();
}
//加载高德地图
loadMap() {
const that = this;
try {
that.map = new AMap.Map(this.map_container.nativeElement, {
view: new AMap.View2D({//创建地图二维视口
resizeEnable: true,
zoom: 10, //设置地图缩放级别
rotateEnable: true,
showBuildingBlock: true
})
});
that.map.on('complete', () => {
console.log("地图已加载完毕!");
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {// 添加工具条和比例尺
that.map.addControl(new AMap.ToolBar());
});
that.map.clearMap(); // 删除地图上所有的覆盖物
AMap.plugin(['AMap.Walking'],function() {
//步行导航
let walking = new AMap.Walking({
map: that.map
});
//根据起终点坐标规划步行路线
walking.search([113.298624,23.042923], [113.288335,23.046121], function(status, result) {
// result即是对应的步行路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
if (status === 'complete') {
console.log('绘制步行路线完成')
} else {
console.log('步行路线数据查询失败' + result)
}
});
});
});
} catch (error) {
this.toast.show('地图加载失败,请检查网络或稍后再试!', '3000', 'center').subscribe();
}
}
}
至此，步行轨迹已完成，更多功能请参考高德WebApi
在生活中，在淘宝购物发货后，APP上通过地图显示快递运行过程中轨迹，所以本人也想实现这样一个功能，所以就有了以上代码实现。。。
