ionic4集成高德地图显示运动轨迹

效果图：

1.jpg

代码实现过程：
一、在高德官网注册一个开发账号：高德开放平台
二、创建一个WEB端应用：

gaode.png

三、在src目录下的index.html引入高德js:

四、HTML:

五、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上通过地图显示快递运行过程中轨迹，所以本人也想实现这样一个功能，所以就有了以上代码实现。。。