vue结合高德地图JS API2.0实现地图路线展示、轨迹纠偏、聚合点、聚合点点击以及弹窗、车辆移动

最新推荐文章于 2024-03-19 09:43:49 发布
最新推荐文章于 2024-03-19 09:43:49 发布
阅读量2.6k 收藏 10
点赞数 2
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43996368/article/details/131102501
版权

vue结合高德地图JS API2.0实现地图路线展示、轨迹纠偏、聚合点、聚合点点击以及弹窗、车辆移动

地图

<template>
  <div style="width: 100%; height: 100%">
    <div id="map-container"></div>
    <div style="display: none">
      <MarkerInfo
        :roadList="roadList"
        :infoContent="nowClusterType"
        ref="MarkerInfo"
      />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { loadAMap, mapStyle } from '@/utils/amap';
  import { highway } from '@/api';
  import coordtransform from 'coordtransform';
  import MarkerInfo from './MarkerInfo.vue';
  //import * as turf from '@turf/turf';
  export default defineComponent({
    name: 'Map',
    props: {
      roadRecord: {
        default: [],
      },
      sickList: {
        default: [],
      },
      sickId: {
        default: '',
        type: String,
      },
      roadList: {
        default: [],
      },
    },
    components: { MarkerInfo },
    setup(prop: any) {
      const map = ref<any>(null);
      const record = ref<any>({
        line: null,
        start: null,
        end: null,
        car: null,
      });
      const roadList = ref<any>([]);
      const fakeMarker = ref<any>(null);
      nextTick(() => {
        loadAMap()
          .then((AMap: any) => {
            AMap.plugin('AMap.MoveAnimation', () => {
              map.value = new AMap.Map('map-container', {
                mapStyle: mapStyle,
                resizeEnable: true,
                zoom: 12,
                rotateEnable: true,
                showLabel: true,
                pitchEnable: true,
              });
              //层级变换，清空窗体信息
              var logMapChange = function () {
                map.value.clearInfoWindow();
                if (fakeMarker.value) map.value.remove(fakeMarker.value);
              };
              map.value.on('zoomchange', logMapChange);
              map.value.on('click', logMapChange);
            });
          })
          .finally(() => {
            getRoad();
          });
      });
      const getRoad = () => {
        highway
          .getRouteLineInfo()
          .then((res: any) => {
            roadList.value = [];
            //轨迹纠偏插件引入
            window.AMap.plugin('AMap.GraspRoad', () => {
              var grasp = new window.AMap.GraspRoad();
              res.list.forEach((item: any) => {
                let path: any = [],
                  nowIndex: number = 0;
                //减少点的获取，高德只允许传参小于500个
                item.forEach((items: any, index: number) => {
                  if (
                    ((item.length < 5000 && index % 10 === 0) ||
                      (item.length >= 5000 && item.length < 10000 && index % 20 === 0) ||
                      (item.length >= 10000 && item.length < 50000 && index % 100 === 0) ||
                      (item.length >= 50000 && index % 200 === 0)) &&
                    path.length < 500
                  ) {
                    if (path.length === 0) {
                      path.push({
                        x: coordtransform.wgs84togcj02(items.longitude, items.latitude)[0],
                        y: coordtransform.wgs84togcj02(items.longitude, items.latitude)[1],
                        sp: items.speed,
                        ag: items.heading,
                        tm: items.gpsTime,
                      });
                    } else {
                      nowIndex++;
                      path.push({
                        x: coordtransform.wgs84togcj02(items.longitude, items.latitude)[0],
                        y: coordtransform.wgs84togcj02(items.longitude, items.latitude)[1],
                        sp: 10,
                        ag: 0,
                        tm: nowIndex,
                      });
                    }
                  }
                });
                //轨迹纠偏
                grasp.driving(path, (error: any, result: any) => {
                  if (!error) {
                    var path2 = [];
                    var newPath = result.data.points;
                    for (var i = 0; i < newPath.length; i += 1) {
                      path2.push([newPath[i].x, newPath[i].y]);
                    }
                    var newLine = new window.AMap.Polyline({
                      path: path2,
                      strokeWeight: 3,
                      strokeOpacity: 1,
                      strokeColor: '#00FF67',
                    });
                    roadList.value.push(newLine);
                    map.value.add(newLine);
                    map.value.setFitView(roadList.value);
                  }
                });
              });
            });
          })
          .finally(() => {
            setTimeout(() => {
              if (prop.sickList && prop.sickList.length > 0)
                setCluster();//添加JSAPI2.0下的聚合点
            }, 400);
          });
      };
      //清空地图
      const removeRecord = (needRemoveLine: boolean = true) => {
        map.value?.clearInfoWindow();
        if (fakeMarker.value) map.value.remove(fakeMarker.value);
        if (needRemoveLine) {
          roadList.value.forEach((item: any) => {
            if (item) map.value.remove(item);
          });
        }
        if (record.value.line) map.value.remove(record.value.line);
        if (record.value.start) map.value.remove(record.value.start);
        if (record.value.end) map.value.remove(record.value.end);
        if (cluster.value) cluster.value.setMap(null);
        if (record.value.car) {
          record.value.car.stopMove();
          map.value.remove(record.value.car);
        }
      };
      const nowClusterType = ref<any>([]);
      const cluster = ref<any>(null);
      const MarkerInfo = ref();
      //打开设备标记点窗体信息
      const clusterCallback = (e: any) => {
        nowClusterType.value = [];
        //判断点击的是聚合点
        if (e.clusterData.length > 0)
          e.clusterData.forEach((item: any) => {
            nowClusterType.value.push(item.info);
          });
        else nowClusterType.value.push(e.marker.info);
        var infoWindow: any = new window.AMap.InfoWindow({
          offset: new window.AMap.Pixel(0, nowClusterType.value.length > 1 ? -40 : -70),
          content: MarkerInfo.value.$el,
          anchor: 'bottom-center',
        });
        infoWindow.open(map.value, [e.lnglat.lng, e.lnglat.lat]);
        if (fakeMarker.value) map.value.remove(fakeMarker.value);
        if (nowClusterType.value.length === 1) {
          fakeMarker.value = new window.AMap.Marker({
            map: map.value,
            position: [e.lnglat.lng, e.lnglat.lat],
            offset: new window.AMap.Pixel(-16, -66),
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(32, 74), // 图标尺寸
              image: require('../../../assets/images/map/alarm-yellow.png'), // Icon的图像
              imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new window.AMap.Size(32, 74), // 根据所设置的大小拉伸或压缩图片
            }),
          });
        }
        //高德 InfoWindow解决2.0版本无法滚动问题
        infoWindow.on('mouseover', () => map.value.setStatus({ zoomEnable: false }));
        infoWindow.on('mouseout', () => {
          map.value.setStatus({ zoomEnable: true });
        });
        infoWindow.on('mousewheel', (e: any) => {
          const { originEvent } = e;
          let doc: any = document.querySelector('.marker-content');
          if (doc) doc.scrollTop -= originEvent.wheelDelta / 5;
        });
      };
      const setCluster = () => {
        map.value?.clearInfoWindow();
        if (cluster.value) cluster.value.setMap(null);
        if (!prop.sickList || prop.sickList.length === 0 || !window.AMap) return;
        let markerList: any = [];
        let allPath: any = [];
        roadList.value.forEach((items: any) => {
          allPath = allPath.concat(items._opts.path);
        });
        prop.sickList.forEach((item: any) => {
          /*let pointsList: any = []
          roadList.value[0].$x.forEach((items: any)=>{
            items.forEach((itemss: any)=>{
              pointsList.push(turf.point(itemss))
            })
          })
          let points: any = turf.featureCollection(pointsList);
          var targetPoint = turf.point([
            coordtransform.wgs84togcj02(item.lon, item.lat)[0],
            coordtransform.wgs84togcj02(item.lon, item.lat)[1],
          ]);*/
          // 计算path上距离pos最近的点
          markerList.push({
            info: item,
            lnglat: window.AMap.GeometryUtil.closestOnLine(
              coordtransform.wgs84togcj02(item.lon, item.lat),
              allPath
            ),
          });
        });
        var _renderMarker = function (context: any) {
          let icon = new window.AMap.Icon({
            size: new window.AMap.Size(32, 74), // 图标尺寸
            image: require('../../../assets/images/map/alarm-blue.png'), // Icon的图像
            imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new window.AMap.Size(32, 74), // 根据所设置的大小拉伸或压缩图片
          });
          context.marker.setOffset(new window.AMap.Pixel(-16, -66));
          context.marker.setIcon(icon);
          context.marker.info = context.data[0].info;
        };
        var _renderClusterMarker = function (context: any) {
          var factor = Math.pow(context.count / prop.sickList.length, 1 / 18);
          var div = document.createElement('div');
          var Hue = 180 - factor * 180;
          var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
          var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
          var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
          var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
          div.style.backgroundColor = bgColor;
          var size = Math.round(30 + Math.pow(context.count / prop.sickList.length, 1 / 5) * 20);
          div.style.width = div.style.height = size + 'px';
          div.style.border = 'solid 1px ' + borderColor;
          div.style.borderRadius = size / 2 + 'px';
          div.style.boxShadow = '0 0 5px ' + shadowColor;
          div.innerHTML = context.count;
          div.style.lineHeight = size + 'px';
          div.style.color = fontColor;
          div.style.fontSize = '14px';
          div.style.textAlign = 'center';
          context.marker.setOffset(new window.AMap.Pixel(-size / 2, -size / 2));
          context.marker.setContent(div);
        };
        cluster.value = new window.AMap.MarkerCluster(map.value, markerList, {
          gridSize: 80,
          averageCenter: false,
          renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
          renderMarker: _renderMarker, // 自定义非聚合点样式
        });
        cluster.value.on('click', clusterCallback);
        //map.value.setFitView();
      };
      watch(
        () => prop.sickList,
        () => {
          setCluster();
        }
      );
      watch(
        () => prop.sickId,
        () => {
          if (cluster.value && cluster.value.it.length > 0) {
            map.value.clearInfoWindow();
            if (fakeMarker.value) map.value.remove(fakeMarker.value);
            nowClusterType.value = [];
            cluster.value.it.forEach((item: any) => {
              if (item.info.id === prop.sickId) {
                nowClusterType.value.push(item.info);
                map.value.setCenter([item.lnglat.lng, item.lnglat.lat + 0.0002], true);
                map.value.setZoom(20, true);
                var infoWindow: any = new window.AMap.InfoWindow({
                  offset: new window.AMap.Pixel(0, -70),
                  content: MarkerInfo.value.$el,
                  anchor: 'bottom-center',
                });
                setTimeout(() => {
                  infoWindow.open(map.value, [item.lnglat.lng, item.lnglat.lat]);
                  fakeMarker.value = new window.AMap.Marker({
                    map: map.value,
                    position: [item.lnglat.lng, item.lnglat.lat],
                    offset: new window.AMap.Pixel(-16, -66),
                    icon: new window.AMap.Icon({
                      size: new window.AMap.Size(32, 74), // 图标尺寸
                      image: require('../../../assets/images/map/alarm-yellow.png'), // Icon的图像
                      imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
                      imageSize: new window.AMap.Size(32, 74), // 根据所设置的大小拉伸或压缩图片
                    }),
                  });
                }, 200);
              }
            });
          }
        }
      );
      watch(
        () => prop.roadRecord,
        () => {
          let path: any = [];
          removeRecord(false);
          if (prop.roadRecord.length === 0) return;
          prop.roadRecord.forEach((items: any) => {
            path.push([
              coordtransform.wgs84togcj02(items.longitude, items.latitude)[0],
              coordtransform.wgs84togcj02(items.longitude, items.latitude)[1],
            ]);
          });
          record.value.line = new window.AMap.Polyline({
            path: path,
            strokeColor: '#00F9FF',
            strokeOpacity: 1,
            strokeWeight: 3,
            strokeStyle: 'solid',
          });
          record.value.car = new window.AMap.Marker({
            map: map.value,
            position: path[0],
            offset: new window.AMap.Pixel(-14, -25),
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(28, 50), // 图标尺寸
              image: require('../../../assets/images/map/car.png'), // Icon的图像
              imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new window.AMap.Size(28, 50), // 根据所设置的大小拉伸或压缩图片
            }),
          });
          record.value.start = new window.AMap.Marker({
            map: map.value,
            position: path[0],
            offset: new window.AMap.Pixel(-16, -55),
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(32, 55), // 图标尺寸
              image: require('../../../assets/images/map/start.png'), // Icon的图像
              imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new window.AMap.Size(32, 55), // 根据所设置的大小拉伸或压缩图片
            }),
          });
          record.value.end = new window.AMap.Marker({
            map: map.value,
            position: path[path.length - 1],
            offset: new window.AMap.Pixel(-16, -55),
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(32, 55), // 图标尺寸
              image: require('../../../assets/images/map/end.png'), // Icon的图像
              imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new window.AMap.Size(32, 55), // 根据所设置的大小拉伸或压缩图片
            }),
          });
          record.value.start.dom.classList.add('marker-bottom');
          record.value.end.dom.classList.add('marker-bottom');

          record.value.car.moveAlong(path, {
            duration: 100, //可根据实际采集时间间隔设置
            autoRotation: true,
          });
          map.value.add(record.value.line);
          map.value.setFitView(record.value.line);
        },
        { deep: true }
      );
      return {
        nowClusterType,
        MarkerInfo,
      };
    },
  });
</script>

地图样式

<style scoped lang="less">
  #map-container {
    width: 100%;
    height: 100%;
    background-color: black;
    :deep(.amap-info-content) {
      padding: 0;
      background-color: transparent;
      box-shadow: none;
    }
    :deep(.amap-info-sharp) {
      border-top: 0 solid transparent;
      bottom: 20px;
    }
    :deep(.amap-layer) {
      background-color: black;
    }
    :deep(.amap-marker) {
	  &.marker-bottom {
	    &::after {
	      content: '';
	      position: absolute;
	      bottom: -9px;
	      left: 7px;
	      height: 18px;
	      width: 18px;
	      border-radius: 50%;
	      background: linear-gradient(180deg, #99f4f6, #00f9ff);
	      transform: rotateX(30deg);
	    }
	  }
	}
  }
</style>

地图加载方法

export function loadAMap() {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.ControlBar',
        'AMap.LineSearch',
        'AMap.StationSearch',
        'AMap.PolylineEditor',
        'AMap.PolygonEditor',
        'AMap.CircleEditor',
        'AMap.AutoComplete',
        'AMap.DistrictSearch',
        'AMap.PlaceSearch',
        'AMap.MouseTool',
        'AMap.moveAnimation',
        'AMap.MarkerCluster',
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap: any) => {
        window.AMap = AMap;
        resolve(window.AMap);
      })
      .catch((e: any) => {
        console.log(e);
        reject();
      });
  });
}

车辆移动

let position: number[] = [
  coordtransform.wgs84togcj02(
    position_3d.lon,
    position_3d.lat
  )[0],
  coordtransform.wgs84togcj02(
    position_3d.lon,
    position_3d.lat
  )[1],
]；
const currentPosition = [
  obuMarker.value.getPosition().lng,
  obuMarker.value.getPosition().lat,
];
const currentDis = window.AMap.GeometryUtil.distance(currentPosition, position);
const currentMileage = 5;
if (currentDis >= currentMileage) {
  window.AMap.plugin(['AMap.MoveAnimation'], () => {
    obuMarker.value.moveTo(position, {
      duration: 1000,
      autoRotation: true,
    });
  });
}

展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Cardhu丶
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue2/3 - 最新详细使用高德地图进行路线规划和详细途径路段信息，vue高德地图实现起点和终点路径高亮显示在地图上，并计算出整个路途公里数、预计到达时间、驾驶导航详细步骤信息（详细示例代码直接复制
高级前端工程师
05-11 3120
vue2，vue3，高德地图，vue高德地图，起点到终点，地图轨迹，路径规划，驾车轨迹图，利用高德地图实现车辆的路线规划，高德地图轨迹绘制，路段详细导航信息，vue实现高德地图路线规划功能，规划路线后如何获取途径的路段信息，途径数据，导航，导航详细数据，vue导航规划，导航路线规划绘制，导航规划后怎么获得途径的各路段，vue3使用高德地图，vue高德地图实现路线规划（含途经点），途径点详细数据，高德地图途径点怎么获取，行车路径规划 起始点+途经点，导航途径点数据用什么api，路线规划设置途经点，详细教程，高
openlayers：实现地图圆点按路线移动（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 176
openlayers：实现地图圆点按路线移动（附完整源码）
基于高德地图 JS API2.0 加载GLTF3D模型的demo（配合three.js）.zip
05-18
基于高德地图 JS API2.0 加载GLTF3D模型的demo（配合three.js）.zip
高德地图自定义点聚合图片
04-26
Android 高德地图自定义点聚合marker图片及Overlay点击选中功能的代码实现及布局文件
基于vue-amap实现轨迹进度条和轨迹拖拽回放
weixin_43929450的博客
03-24 2309
采用定时器的方式，做出来的动画效果和高德自带的效果有一点点的差距，不过应该能接受，未使用高德的动画，是因为解决不了拖拽进度条以后，动画没有按照最新的轨迹来，还是按照老的轨迹行走，所以就想了别的方式，哪位大佬解决了这个问题，能否告诉我一声！！！
学习笔记——vue中使用高德地图中轨迹回放时，小车移动速度过快问题
qq_41339126的博客
05-10 4609
问题：在vue中，使用高德地图中的轨迹回放，来展现小车的移动轨迹。但是小车移动速度过快，修改moveAlong()中的参数也没用。 首先，需要进入高德开放平台，注册并登录控制台。在应用管理=>我的应用中创建一个应用。在新创建的一个应用中添加一个key。 1.引入高德地图： 1.npm下载 npm i vue-amap --save 2.main.js导入 import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMap.
vue项目引入高德，实现小车实时渲染车辆轨迹
最新发布
m0_57997609的博客
03-19 871
vue在高德地图实现渲染车辆以及轨迹
手摸手系列之SpringBoot+Vue2项目整合高德地图实现车辆实时定位功能
The man was lazy and left no message
12-31 2140
最近在做一个物流内陆运输的项目，其中的一个关键功能是根据车辆的GPS数据在页面上实时显示车辆位置信息。由于我们已经获得了第三方提供的GPS数据，所以接下来的任务是将这些数据整合到我们的系统中，并利用高德地图API来展示车辆的实时位置。接下来，来看看怎么样来一步步实现吧。Vue整合高德地图总的来说还是非常简单的，下一篇我们继续来介绍如何实现展示车辆的某段时间的运行轨迹。
vue使用高德地图实现多车定位和信息窗口:
SunPeng的博客
08-24 1485
vue使用高德地图实现多车定位和信息窗口:
vue-amap的轨迹回放功能开发
qq_41206597的博客
04-28 706
vue-amap高德轨迹轨迹回放功能实现
js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置
06-24
js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置 方法简便，丢入即可使用 vue集成高德地图，实时获取用户的位置经纬度，并在地图显示具体位置
高德地图轨迹回放
12-17
地图轨迹回放包含下面功能 1.轨迹回放播放 2.轨迹回放暂停 3.轨迹回放速度增大 4.轨迹回放速度减小 5.轨迹回放中文地址显示 6.支持进度条控制轨迹回放 注：使用时替换相应地图key即可，提供Json模拟数据，保证运行
vue中使用高德地图（JSAPI2.0示例）
04-28
参考高德地图官网的示例实现的。
高德地图点聚合，点聚合点击事件，单点点击事件
06-06
高德地图点聚合，聚合点点击事件，一切效果都需要您自己的key值，单点点击事件，点聚合点击事件后信息窗体每个点添加点击事件。
vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑
05-07
1：实现对圆形、多边形、点标记、折线 等的绘制； 2：支持单个绘制 或者 多个绘制的选择； 3：支持对绘制后的图形进行删除； 4：支持对绘制后的图形进行编辑，调整； 5：支持根据图形数据显示到地图上，进行后续操作...
在vue中高德地图引入和轨迹的绘制的实现
01-21
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from...
vue使用高德地图点击下钻上浮效果的实现思路
10-16
主要介绍了vue使用高德地图点击下钻 上浮效果的实现思路,本文以浙江省为例通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
vue2高德地图实现定位、点击地图获取当前位置信息、搜索
qq_44724181的博客
02-11 6703
web高德地图定位、点击获取位置信息、搜索
vue.js 高德地图轨迹纠偏
07-20
在Vue.js中使用高德地图进行轨迹纠偏，您可以通过以下步骤来实现： 1. 首先，确保您已经引入了高德地图 JavaScript API的SDK文件，您可以在HTML文件中添加以下代码： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"></script> ``` 2. 创建一个Vue组件，用于显示地图和处理轨迹纠偏的逻辑。在该组件的Vue实例中，您可以使用高德地图的相关API进行操作。 ```javascript <template> <div id="mapContainer"></div> </template> <script> export default { mounted() { // 初始化地图 const map = new AMap.Map('mapContainer', { zoom: 13, center: [经度, 纬度] // 设置地图中心点 }); // 获取原始轨迹数据 const originalTrackData = [ [经度1, 纬度1], [经度2, 纬度2], // ... ]; // 创建轨迹纠偏服务实例 const driving = new AMap.Driving({ map: map, panel: 'resultPanel' }); // 调用轨迹纠偏服务的纠偏方法 driving.search(originalTrackData, function(status, result) { if (status === 'complete') { const correctedTrackData = result.routes[0].path; // 获取纠偏后的轨迹数据 console.log('纠偏后的轨迹数据：', correctedTrackData); } else { console.log('轨迹纠偏失败'); } }); } } </script> <style> #mapContainer { width: 100%; height: 400px; } </style> ``` 在上面的代码中，您需要替换以下部分： - `您的高德地图API密钥`：您需要在高德地图开放平台申请API密钥。 - `[经度, 纬度]`：您可以设置地图的中心点，用于显示轨迹。 - `originalTrackData`：您的原始轨迹数据，需要替换为实际的经纬度坐标点。 这样，当该Vue组件挂载到页面上时，它会显示一个带有纠偏后轨迹的地图，并在控制台输出纠偏后的轨迹数据。 希望以上信息对您有所帮助！如有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值