利用vue+高德地图API 实现用户的运动轨迹

高德地图网址：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare

任务一：实现地图显示

先完成准备工作，这一步是后面工作的基础。准备工作部分参考了：

https://blog.csdn.net/qq_59863007/article/details/125902045

http://t.zoukankan.com/fontomas-p-13253963.html

注册，拿到key
安装：npm i @amap/amap-jsapi-loader --save

在 public/index.html 中加入：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>

在main.js页面中配置安全密钥

   window._AMapSecurityConfig = {
   	securityJsCode: '你的安全密钥' //*  安全密钥
   }

5 .创建地图组件，后续我调用组件实现
5.1 创建组件

<template>
  <div>
    <!-- 用来显示地图 -->
    <!-- 可以不写宽度，但一定要有高度 -->
  <div id="container"  ></div>
      <h2>{{fathermsg}}<>
  </div>
</template>
<script>
    export default {
        name: 'Map2 ',
        data() {
            return {
            }
        },
        props: {
            fathermsg:{}
        }
</script>
<style scoped>
  #container{
    width: 100%;
    height: 500px;

  }
</style>

注： props: {
fathermsg:{}
} 用来接收前端传来的值；

5.2 在 main.js中注册组件

// 高德地图组件
import Map2 from "@/components/Map2"
// 全局组件挂载
Vue.component('Map2', Map2)

5.3 调用组件

<template>
  <div>
    <Map2 :fathermsg="pmsg" ></Map2>
  </div>

</template>

<script>
  import Map2 from '../components/Map2/index.vue'
  export default {
    name: 'hw3',
    components:{
      Map2
    },
    data(){
      return{
        pmsg:"这是父组件"
      }
    }
  }
</script>

<style scoped>

</style>

注： <Map2> </Map2>是组件名称

想给组件传值的话，写成 <Map2 :fathermsg="pmsg" ></Map2>

pmsg会赋给 fathermsg 然后传过去，那边接受的值也是fathermsg 。

到这里：可以实现地图的显示，而且父组件的消息能够传到子组件才对

接下来的任务就不细分了，直接上代码，任务包括：

任务二：添加标记点

任务三：轨迹数据的相互传输

任务四：根据数据实现轨迹效果并沿着运动

任务五：轨迹删除，标记点删除

…/components/Map2/index.vue的代码

<template>
  <div>
    <!-- 用来显示地图 -->
    <!-- 可以不写宽度，但一定要有高度 -->
  <div id="container"  ></div>
    <el-button
      icon="el-icon"
      size="mini"
      @click="addTrack"
    >轨迹回放</el-button>

    <el-button
      icon="el-icon-delete"
      size="mini"
      @click="delTrack"
    >轨迹删除</el-button>
  </div>
</template>

<script>
  //引入高德地图
  //import AMap from '@amap/amap-jsapi-loader'
  export default {
    name: 'Map2 ',
    data() {
      return {
        map: null,
        marker: null,
        msg:"这是子组件",
        temp:[],
        polyline:[],
        passedPolyline:[],
        startMarker:null,
        // 用于测试的轨迹数据，父组件传来的polylinefather也是这种格式
        lineArr: [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]],
      }
    },
    props: {
      polylinefather:{
        type:[String,Number,Array],
      },
      pmsg:{}
    },
//mounted()负责初始化的工作包括：1.生成地图2.确定初始中心点3.生成初始标记点
    mounted() {
        //生成一个地图对象，确定初始中心点
      var map=new window.AMap.Map('container', { // eslint-disable-line no-unused-vars
        zoom:10,//级别
        center:[116.478935,39.997761],//中心点坐标
        viewMode:'2D'//使用2D视图
      });
      // 生成一个标记点marker：
      let lng=116.38;
      let lat=39.90;
      this.marker = new window.AMap.Marker({
        position: new window.AMap.LngLat( lng,lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '',
      });
    // 将创建的点标记添加到已有的地图实例：
      map.add(this.marker);
      this.map=map;
      console.log("marker添加成功");
    },
//方法调用，实现轨迹的生成和删除
    methods: {
      // 添加轨迹
      addTrack() {
        // 重新根据传来的值，选取第一个坐标，创建一个 标记点Marker实例和设置地图的中心点：
        var lng=this.polylinefather[0][0];
        var lat=this.polylinefather[0][1];
        // 1.重新设置地图中心点
        var position = new AMap.LngLat(lng, lat);  // 标准写法
         //2.重建一个标记点 marker
            // 2.1需要移除已创建的 marker
        this.map.remove(this.marker);
           // 2.2创建新的 marker
        this.marker = new window.AMap.Marker({
          position: new window.AMap.LngLat( lng,lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '',
        });
         // 2.3将创建的点标记添加到已有的地图实例：
        this.map.add(this.marker);
        // 用折线绘制轨迹
        this.polyline = new window.AMap.Polyline({
          map: this.map,
          path: this.polylinefather,
          // 添加dirImg可以自定义路线的箭头，支持Image和Canvas
          showDir: true,
          dirImg:'https://a.amap.com/jsapi_demos/static/images/mass0.png',
          strokeColor: "#28F", //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 10, //线宽
          strokeStyle: "solid"  //线样式
        });
        // 创建了一个车辆的点用于运动
        this.startMarker = new AMap.Marker({
          map: this.map,
          size: new window.AMap.Size(50, 52),
          // 第一个点为起点
          position: this.polylinefather[0],
          icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
          offset: new AMap.Pixel(-35, -20),
        });
        console.log("轨迹绘制2");
        this.startAnimation();
        console.log("运动2");
      },
      // 开始运动
      startAnimation() {
        // 加载插件MoveAnimation
        window.AMap.plugin("AMap.MoveAnimation", () => {
          // 运动过的轨迹样式
          this.passedPolyline = new window.AMap.Polyline({
            map: this.map,
            strokeColor: "#AF5", //线颜色
            strokeWeight: 6, //线宽
          });
          // 绑定运动事件
          this.startMarker.on("moving", (e) => {
            this.passedPolyline.setPath(e.passedPath);
            this.map.setCenter(e.target.getPosition(), true);
          });
          // 开始运动
          this.startMarker.moveAlong(this.polylinefather, {
            // 每段动画持续时长, 单位：ms
            duration: 500,
            // 覆盖物是否沿路径旋转
            autoRotation: true,
          });
        });
      },
      // 删除轨迹
      delTrack() {
        // 移除已创建的 marker
        this.map.remove(this.marker);
        console.log("轨迹删除方法开始")
        // 起点删除
        if (this.startMarker) {
          this.startMarker.remove();
          this.startMarker = null;
        }
        // 折线删除
        if (this.polyline) {
          this.polyline.setMap(null);
          this.polyline = null;
        }
        // 走过的折线删除
        if (this.passedPolyline) {
          this.passedPolyline.setMap(null);
          this.passedPolyline = null;
        }
      }
    }
  }
</script>

<style scoped>
  #container{
    width: 100%;
    height: 500px;

  }
</style>

views/index.vue代码

<template>
  <div>
    <Map2 :pmsg="pmsg" :polylinefather="polyline04" ></Map2>
  </div>

</template>

<script>
  import Map2 from '../components/Map2/index.vue'
  export default {
    name: 'hw3',
    components:{
      Map2
    },
    data(){
      return{
        polyline04:[ [ 116.478935, 39.997761 ], [ 116.478939, 39.997825 ], [ 116.478912, 39.998549 ], [ 116.478912, 39.998549 ], [ 116.478998, 39.998555 ], [ 116.478998, 39.998555 ], [ 116.479282, 39.99856 ], [ 116.479658, 39.998528 ], [ 116.480151, 39.998453 ], [ 116.480784, 39.998302 ], [ 116.480784, 39.998302 ], [ 116.481149, 39.998184 ], [ 116.481573, 39.997997 ], [ 116.481863, 39.997846 ], [ 116.482072, 39.997718 ], [ 116.482362, 39.997718 ], [ 116.483633, 39.998935 ], [ 116.48367, 39.998968 ], [ 116.484648, 39.999861 ] ]
        ,pmsg:"这是父组件"
      }
    }
  }
</script>

<style scoped>

</style>

最终效果：

轨迹回放，标记点为轨迹的第一个点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZS0DWnxl-1664959308957)(D:/GitCode/tuchuang/img/image-20221005163109129.png)]

轨迹删除，轨迹和标记点都删除了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VAU6VF9I-1664959308959)(D:/GitCode/tuchuang/img/image-20221005163125930.png)]

最后总结：

刚开始用的百度地图的api，试了一下，发现传过去的值渲染有问题，最后才选了高德地图的api。

高德地图的api使用需要注意的点是Map对象生成这一步可能会存在问题，可能会报错
如： ‘map’ is assigned a value but never used 和 ‘AMap’ is not defined
解决方案见这位up主的评论区：
https://www.bilibili.com/video/BV1EZ4y1z72F/?spm_id_from=333.999.0.0&vd_source=a56e9c2852c4b906ac796aa4c61964ec
还有一点就是this.map和map的使用需要注意这点我踩了很多坑
掌握前端的 debugger 手段
https://blog.csdn.net/leaning_java/article/details/122828550
复习了下 vue 中父子组件
https://www.bilibili.com/video/BV1TW4y1r7vV/?spm_id_from=333.337.search-card.all.click&vd_source=a56e9c2852c4b906ac796aa4c61964ec
复习了父子组件之间的通信
https://www.bilibili.com/video/BV1Zy4y1W7Xo/?spm_id_from=333.337.search-card.all.click&vd_source=a56e9c2852c4b906ac796aa4c61964ec
进阶知识，以后再看vue 利用高德地图的巡航轨迹，做带进度条和倍速的轨迹回放_Jusme_wx的博客-CSDN博客_高德轨迹回放进度条