vue项目 vue-amap高德地图api回放轨迹源码

前端  /  管理员 发布于 3年前   3206

此项目在vue中完成，所以需要安装vue-amap，地址在这vue-amap文档，

官方git手册：

https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

文档步骤比较详细，小编就不多说了，

第二点文档也有提到，对于定制化较高的项目中，amap已经不能满足开发者所需求，所以需要基于高德地图的sdk来完成。

所需要的api一定要在

lazyAMapApiLoaderInstance

下完成。

废话不多说直接上源码html部分省略:

/全局引入 main.js中配置
import VueAMap from 'vue-amap';
import { lazyAMapApiLoaderInstance } from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
     key: 'YOUR_KEY',
     plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
     uiVersion: '1.0' // ui库版本，不配置不加载,
      v: '1.4.4'
     });
//vue文件调用
import { AMapManager, AmapMarker, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
export default {
  data() {
       path: [
        [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],
        
      ],  
      map: null,
      marker:null,
      polyline :null,
  },
  methods: {
    //点击按钮播放 
    play(){
        this.marker.moveAlong(this.path,200);            
    },
    //点击暂停
    pause(){
        this.marker.pauseMove();    
    },
    //继续播放
   resumeAnimation() {
        this.marker.resumeMove();
       },
   //此暂停 再次点击播放 从头开始 
       stopAnimation() {
       this.marker.stopMove();
       },
 path(){   
 lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map('amapContainer', {
      this.map = amapManager.getMap();
        this.marker = new AMap.Marker({
          map: that.map,
          position: [116.478935, 39.997761],
          icon: "https://webapi.amap.com/images/car.png",
          offset: new AMap.Pixel(-26, -13),
          autoRotation: true,
          angle: -90,
        });
        // 绘制轨迹
        this.polyline = new AMap.Polyline({
          map: that.map,
          path: that.path,
          showDir: true,
          strokeColor: "#28F", //线颜色
          strokeWeight: 6, //线宽
          strokeOpacity: 1, //线透明度
          strokeStyle: "solid", //线样式
        });
         //绘制路过了的轨迹
      var passedPath = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色-绿色
        //path: this.lineArr,
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
        //经过轨迹的更新
        this.marker.on("moving", (e) => {
      passedPolyline.setPath(this.passedPath);
        });
        // 自动适配视图
        this.map.setFitView();
       });
      });
       }
     },
       mounted(){
        this.path()       
       }
}