Vue高德轨迹回放

高德地图实现轨迹回放的方式之一:使用高德地图官方api中UI组件库中的轨迹展示。通过轨迹展示创建巡航器,实现轨迹回放,下面展示HTML以及Vue的高德轨迹回放,可以点击下方链接直接进入高德开发平台!

高德开放平台

HTML版高德轨迹回放

进入页面后点击开发支持→地图JS API

bc8a2f3832b44d76b1c24edfbf7e22db.png

 进入地图JS API后点击示例中心,进入界面后拉到底下找到轨迹回放

 8a3619970206464291a4c064e879ce0c.png

进入后打开轨迹回放如下图中已有示例,模拟小车的行驶轨迹。其模拟的轨迹为右侧框图的小车模拟位置点, 将自己获取的经纬度点替代上面提到的小车模拟位置点即可验证自己设备输出的GPS位置的准确性。(注意:此页面代码为HTML格式

6f1b8f3d9c08487c91f00782c72f4492.png

Vue版高德轨迹回放

代码:

<template>
	<div>
	    <div id="container"></div>
	    <div class="input-card">
	      <h4>轨迹回放控制</h4>
	      <div class="input-item">
	        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
	        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
	      </div>
	      <div class="input-item">
	        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
	        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
	      </div>
	    </div>
	  </div>
</template>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
	//请求路径
	//import {
		//playbacklist,
	//} from "@/api/obd/playback";

	export default {
	    mounted() {
	      this.initMap();
	    },
	    beforeDestroy() {
	      this.map && this.map.destroy();
	    },
	    data() {
	      return {
	        map: null,
	        marker: null,
	        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]
	        ]
	      };
	    },
	    methods: {
	      initMap() {
	        this.map = new AMap.Map("container", {
	          resizeEnable: true,
	          center: [116.397428, 39.90923],
	          zoom: 17
	        });
	
	        this.marker = new AMap.Marker({
	          map: this.map,
	          position: [116.478935, 39.997761],
	          icon: "https://webapi.amap.com/images/car.png",
	          offset: new AMap.Pixel(-26, -15),
	          autoRotation: true,
	          angle: -90
	        });
	
	        // 绘制轨迹
	        let polyline = new AMap.Polyline({
	          map: this.map,
	          path: this.lineArr,
	          showDir: true,
	          strokeColor: "#28F", //线颜色
	          // strokeOpacity: 1,     //线透明度
	          strokeWeight: 6 //线宽
	          // strokeStyle: "solid"  //线样式
	        });
	
	        let passedPolyline = new AMap.Polyline({
	          map: this.map,
	          // path: this.lineArr,
	          strokeColor: "#AF5", //线颜色
	          // strokeOpacity: 1,     //线透明度
	          strokeWeight: 6 //线宽
	          // strokeStyle: "solid"  //线样式
	        });
	
	        this.marker.on("moving", function (e) {
	          passedPolyline.setPath(e.passedPath);
	        });
	
	        this.map.setFitView();
	      },
	      startAnimation() {
	        this.marker.moveAlong(this.lineArr, 200);
	      },
	      pauseAnimation() {
	        this.marker.pauseMove();
	      },
	      resumeAnimation() {
	        this.marker.resumeMove();
	      },
	      stopAnimation() {
	        this.marker.stopMove();
	      }
	    }
	  };
</script>

<style lang="less" scoped>
	// @import url('https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css');
	
	  #container {
	    height: 1000px;
	    width: 100%;
	  }
	
	  .input-card .btn {
	    margin-right: 1.2rem;
	    width: 9rem;
	  }
	
	  .input-card .btn:last-child {
	    margin-right: 0;
	  }
	  
	  .btn {
	    display: inline-block;
	    font-weight: 400;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    border: 1px solid transparent;
	    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	    background-color: transparent;
	    background-image: none;
	    color: #25A5F7;
	    border-color: #25A5F7;
	    padding: .25rem .5rem;
	    line-height: 1.5;
	    border-radius: 1rem;
	    -webkit-appearance: button;
	    cursor:pointer;
	  }
	  
	  .input-item {
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    -ms-flex-align: center;
	    align-items: center;
	    width: 100%;
	    height: 3rem;
	  }
	  
	  .input-card {
	    display: flex;
	    flex-direction: column;
	    min-width: 0;
	    word-wrap: break-word;
	    background-color: #fff;
	    background-clip: border-box;
	    border-radius: .25rem;
	    width: 22rem;
	    border-width: 0;
	    border-radius: 0.4rem;
	    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
	    position: fixed;
	    bottom: 1rem;
	    right: 1rem;
	    -ms-flex: 1 1 auto;
	    flex: 1 1 auto;
	    padding: 0.75rem 1.25rem;
	  }
</style>

常见问题:

启动时会遇到Module not found: Error: Can’t resolve ‘less-loader’ in '文件位置’报错

原因是因为 less 、 less-loader模块未安装,但在中进行使用

解决方法:npm install --save-dev less-loader less

直接安装可能会存在版本太高问题的报错,进行npm run dev时项目无法启动

解决方法:npm install less-loader@5.0.0 -D 可在版本位置选择合适的版本

### 如何在 Vue 中使用高德地图 API 实现轨迹回放功能 #### 准备工作 为了能够在 Vue 项目中集成并使用高德地图JS API 来实现轨迹回放,开发者需要先完成一些准备工作。这包括创建一个新的 Vue 应用程序以及注册获取用于调用接口所需的 Key。 #### 安装依赖项 通过命令行工具安装 `vue` 和其他必要的开发环境之后,在项目的根目录下执行如下 npm 命令来引入 axios 或者 fetch 这样的 HTTP 请求库以便后续可以方便地发起网络请求: ```bash npm install axios --save ``` #### 创建组件结构 接下来定义一个名为 AMapPlayback 的单文件 .vue 组件用来承载地图容器及其交互逻辑。该组件内部会初始化地图实例并且加载 LBS 数据服务插件以支持路径规划等功能特性[^1]。 #### 初始化地图对象 在 mounted 生命周期钩子函数内利用 script 标签动态注入方式加载外部 js 文件——即官方提供的最新版本的地图 SDK;待其成功载入后再进一步配置 map 变量指向新建立起来的地图实体,并设置合适的视图范围参数确保能够完整显示整个行程路线。 ```javascript mounted() { const _this = this; var map, marker; function initAMap() { window._AMapSecurityConfig = { securityJsCode: 'your-security-code' }; // 加载高德地图JS API脚本 let script = document.createElement('script'); script.type = "text/javascript"; script.src = "https://webapi.amap.com/maps?v=2.0&key=" + process.env.VUE_APP_AMAP_KEY; // 使用环境变量存储密钥更安全 script.onload = () => { map = new AMap.Map("container", { zoom: 13, center: [116.397428, 39.90923], // 默认中心点坐标可自定义修改 }); // 添加监听事件处理点击操作或其他用户行为触发的动作... _this.loadPathData(); }; document.head.appendChild(script); } if (!window.AMap) { initAMap(); } else { setTimeout(() => { initAMap(); }, 0); } } ``` #### 获取并绘制行驶线路数据 编 loadPathData 方法负责向服务器端发送异步请求取得一系列由时间戳和经纬度组成的 GPS 记录列表作为输入源传递给 Polyline 构造器从而形成可视化的折线图形覆盖物展示于画布之上。 ```javascript methods: { async loadPathData() { try { const response = await axios.get('/path-data'); // 替换成实际的数据接口地址 let path = []; for (let i = 0; i < response.data.length; ++i) { path.push([response.data[i].lng, response.data[i].lat]); } let polyline = new AMap.Polyline({ path: path, strokeColor: "#FF33FF", strokeOpacity: 1, strokeWeight: 6, zIndex: 50, }); polyline.setMap(map); // 设置动画效果使车辆图标沿着既定轨道移动模拟真实行车过程... } catch(error){ console.error(`Error loading path data ${error}`); } }, }, ``` #### 启动播放机制 最后一步就是让小车标志按照预设的速度匀速前进穿过每一个途经站点直至终点位置结束本次演示流程。这里可以通过定时器配合 Marker 类中的 animateAlong 接口轻松达成目标。 ```javascript async playRouteAnimation(){ let carMarkerOptions = { icon: "//a.amap.com/jsapi_demos/static/demo-center-v2/car.png", position: [116.397428, 39.90923], angle: 0, autoRotation : true }; marker = new AMap.Marker(carMarkerOptions ); marker.setMap(map); // 开始沿指定路径运动 marker.animateAlong(path,{ duration : 60 * 1000,// 整体耗时一分钟 repeat : false// 是否循环播放 }); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半度纳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值