vue使用高德地图做车辆轨迹展示

使用前准备 : 高德地图key

使用插件: vue-amap

1.npm安装vue-amap

npm install vue-amap --save

2 在mai.js中引入

import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
  key: "自己申请的key",
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',  //这里是vue-amp 的版本号
//这里是高德ui组件的版本号3
  uiVersion: '1.0'  //添加 uiVersion 的脚本版本号  这个很重要!必须要引入

});


new Vue({
  el: '#app',
  router,
  render: h => h(App),
  created() {
    if (_global_.UI) {
      Vue.prototype.GLOBAL = _global_
    } else {
      Vue.prototype.GLOBAL = {
        UI: {}
      }
    }
  },
})

3.在自己创建的组件页面使用

贴个地址:轨迹展示-海量数据-参考手册-AMapUI 组件库 | 高德地图API

<template>
  <!-- <div id="map-location"></div> -->
    <div class="app">
    <div ref="map" id="map"  style="width: 100%; height: 600PX;"></div>
  </div>

</template>
<script>
//引入高德地图ui组件
import { lazyAMapApiLoaderInstance } from "vue-amap"; 
import carUrl from "../../assets/images/car1.png";
var map;
export default {
  data() {
    return {
      navgtrSpeed:100000, //播放速度
      navgtr:"",
      pathLsit:""
    };
  },
  mounted() {
    
  
  },
  created(){
  
  },
  props: ["linePath", "mapType", "status"],
  watch:{
    // 'linePath':function(){
    //   this.init();
    // },
    linePath: function (newVal, oldVal) {
      this.polylinePath=[]
      this.polylinePath = newVal;
      if (this.polylinePath.length > 1) {
        // this.init();
      }
    },
  },
  methods: {
   //初始化地图插件
    init(pathLsit) {  
   // 这里是调用初始化地图插件的时候传入的坐标参数
      this.pathLsit=pathLsit

      let self = this;
 //声明一个一个arr用于存储需要渲染的坐标点
      let path = []

      this.pathLsit.forEach(res => {
      //将后台返回的数据变更成高德需要的数据格式 [113.565655 ,30.25524]经度在前纬度在后
        path.push([res.lng, res.lat,res.address]);
      });
      lazyAMapApiLoaderInstance.load().then(() => {
        //初始化地图
        map = new AMap.Map("map", {
          resizeEnable: true,//是否监控地图容器尺寸变化，默认值为false
          zoom: 35, //地图显示的缩放级别
       //地图中心点坐标值
          center: new AMap.LngLat(this.pathLsit[0].lng, this.pathLsit[0].lat) //
        });
        this.PathSimplifier()
        this.initPathSimplifier(path)
      });
    },
    //初始化一个点标记position 是定位点的中心
    PathSimplifier(){
         //这个是添加AMapUI的点标注
        //"overlay/SimpleMarker" 简单的标注
          AMapUI.loadUI(["overlay/SimpleMarker"], PathSimplifier => {
            const marker = new PathSimplifier({
              iconLabel: "起",//文字描述
              iconStyle: "red", // //图标主题
              color: "#fffff",  
         //...其他Marker选项...，不包括content
              map: map,
              radius: 5,
              position: [this.pathLsit[0].lng, this.pathLsit[0].lat],
              iconStyle: {
                src: "//webapi.amap.com/theme/v1.3/markers/b/mark_b.png",
                style: {
                  width: "20px",
                  height: "30px",
                  color: "#f5f5f5"
                }
              }
            });
          });
    },
    initPathSimplifier(path) {
      let obj = {

      }
//ui/misc/PathSimplifier 轨迹展示组件
      AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier, $ ) =>{
          if (!PathSimplifier.supportCanvas) {
            alert("当前环境不支持 Canvas！");
            return;
          }
          var defaultRenderOptions = {
            //设置颜色
            renderAllPointsIfNumberBelow: 1000, //绘制路线节点，如不需要可设置为-1
            pathTolerance: 0,
            keyPointTolerance: 0,
            pathLineStyle: {
              //设置显示路线的颜色
              lineWidth: 6,
              strokeStyle: "#3399FF",
              borderWidth: 1,
              borderStyle: "#eeeeee",
              dirArrowStyle: true
            },
            keyPointStyle: {
              //设置定位点的颜色
              radius: 3,
              fillStyle: "#ffffff",
              lineWidth: 1,
              strokeStyle: "#ff5252"
            },
            pathLineSelectedStyle: {
              //设置鼠标悬停的颜色
              lineWidth: 6,
              strokeStyle: "#f1ff1b",
              borderWidth: 1,
              borderStyle: "#f01515",
              dirArrowStyle: true
            },
            dirArrowStyle: {
              stepSpace: 35,
              strokeStyle: "#ffffff",
              lineWidth: 2
            },
            pathNavigatorStyle: {
              initRotateDegree: 0,
              width: 20,
              height: 40,
              autoRotate: true,
              lineJoin: "round",
              content: PathSimplifier.Render.Canvas.getImageContent(
                carUrl,
                onload,
                onerror
              ),
              fillStyle: "#159ef0",
              strokeStyle: "#1b9deb",
              lineWidth: 1,
              pathLinePassedStyle: {
                //设置轨迹颜色
                lineWidth: 3,
                strokeStyle: "#66CCFF",
                borderWidth: 1,
                borderStyle: "#eeeeee",
                dirArrowStyle: true
              }
            }
          };
      //核心功能
          var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例
            //具体什么作用不知道.官方只说是返回路线坐标点
            getPath: function(pathData, pathIndex) {
              return pathData.path;
            },
             //返回鼠标悬停时显示的信息 坐标点的描述
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
              // console.log(pathData)
              if (pointIndex >= 0) {
                //point
                return (
                  // pathData.name +
                  // "，点：" +
                  // pointIndex +
                  // "/" +
                  // pathData.path[2]
                  // pathData.name +
                  "经点" +
                  pointIndex +
                  "：" +
                  pathData.path[pointIndex][2]
                );
              }

              // return pathData.name + "，点数量" + pathData.path.length;
            },
            renderOptions: defaultRenderOptions
          });
          // 这里是设置数据 
          pathSimplifierIns.setData([
            {
              name: "路线0",
              path: path
            }
          ]);
          //对第一条线路（即索引 0）创建一个巡航器
          this.navgtr = pathSimplifierIns.createPathNavigator(0, {
            loop: false, //循环播放
            speed: this.navgtrSpeed //巡航速度，单位千米/小时
          });
          this.navgtr.start();
        });
        
    },
    //播放的方法
    play(){
      this.navgtr.start();
    },
    //暂停的方法
    suspend(){
      this.navgtr.pause()
    },
    // 恢复的方法
    recover(){
      this.navgtrSpeed = 100000
      this.navgtr.resume();
    },
     //倍数的方法
    add(val){
      if(val){
        this.navgtrSpeed = 100000 * val
      }
      console.log(this.navgtrSpeed)
      this.navgtr.setSpeed(this.navgtrSpeed)
    }
  }
}
</script>
<style>
#map-location {
  width: 100%;
  height: 500px;
}
</style>

效果图: