uni-app实现地图车辆移动轨迹回放

<template><view><view><map id="Map" style="width: 100%; height: 1000px;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polylines" @markertap="markertap"></map></view></view>
</template><script>export default {data() {return {markers: [],//路线信息polylines: [{width: 8,points: [],arrowLine: true,color: '#3591FC',}],latitude: 39.909,//markers没有数据时默认的经纬度北京longitude: 116.39742,mapContext: null, //地图对象IsIsstartMove: false, //是否开始回放nextPointIndex: 1, //下一个坐标点};},onReady() {//this.test();this.getList();},methods: {//标点点击事件，可用于点击标点弹框显示标点详情markertap(e) {let that = thisvar id = e.markerId;console.log(id)},//根据项目情况async getList() {await uni.request({url: 'https://xxxxx', //请求接口method: 'get',success: (r) => {if (r.data.code == 0) {that.markers = r.data.data;if (that.markers.length > 0 && that.markers != null) {let listArr = []//该方法会在每个有经纬度的地方出现标点that.markers.map(item => {const obj = {id: item.id,width: 30,height: 30,//如果有数据就覆盖原有的经纬度latitude: that.latitude = item.latitude,longitude: that.longitude = item.longitude,iconPath: '/static/biaodian.png',anchor: {x: 0.5,y: 1}}listArr.push(obj)})that.markers = listArr// 初始化地图不划线that.polylines[0].points = that.markers/*** 搜索完成设置路线后自动移动轨迹*/that.initMap();that.handleIsstartMove();}}},fail: (err) => {return uni.showToast({title: "请求接口失败"})},})}, //设置地图initMap() {this.initMarkers()//初始化地图this.mapContext = uni.createMapContext('Map', this)},//设置位置（从起点开始）initMarkers() {this.markers[0].latitude = this.polylines[0].points[0].latitudethis.markers[0].longitude = this.polylines[0].points[0].longitude}, //开始移动handleIsstartMove() {this.IsstartMove = truethis.moveMarkers()}, //移动坐标moveMarkers() {this.mapContext.translateMarker({markerId: this.markers[0].id,destination: {latitude: this.polylines[0].points[this.nextPointIndex].latitude,longitude: this.polylines[0].points[this.nextPointIndex].longitude},animationEnd: res => {//播放结束，继续移动到下一个点，最后一个点时结束移动if (this.nextPointIndex < this.polylines[0].points.length - 1) {this.nextPointIndex++if (this.IsstartMove) {this.moveMarkers()}} else {this.nextPointIndex = 1this.IsstartMove = false}}})}}}
</script>

轨迹回放部分代码原创博主

uni-app实现地图车辆移动轨迹回放相关推荐

利用百度地图抓取公交信息实现三维地图车辆跟踪轨迹回放
MapVGL,是一款基于WebGL的地理信息可视化库,是一款基于百度地图的大数据可视化开源库,可以用来展示大量基于3D的地理信息点线面数据.设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫 ...
JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）
关于车辆的轨迹回放功能方法,主要分为两种,一种是通过标记点moveAlong()的方法,另一种是PathSimplifier是一个轨迹展示组件:两种方法,各有各的优缺点,前者是比较简单,但是不能在中途 ...
JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（下）
上篇文章提到了车辆的轨迹回放主要有两个方案:一种是通过标记点moveAlong()的方法,另一种是PathSimplifier是一个轨迹展示组件:上篇使用了标记点的方法,这篇就来使用PathSimpl ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
三维地图之cesium轨迹回放（有代码）
一.cesium加载三维地图和三维模型 Cesium的官方教程写得是非常详尽的,用chrome打开官方学习文档https://cesium.com/docs/,一键翻译,照着学习是最好的方案. 最简单 ...
腾讯地图GL（轨迹回放）
腾讯地图轨迹回放的实现效果图首先了解一下需要使用到的API API 定义 MultiMarker(必选) 用于实现在地图中的点标注功能,可以根据用户设置的样式同时标注多个位置 InfoWindow ...
vue使用高德地图制作小车轨迹回放动画简单案例
首先在根目录public中的index.html引入高德地图 <script type="text/javascript" src="https://webapi. ...
Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录，轨迹回放，导航等)
转载请标明地址:http://blog.csdn.net/gaolei1201/article/details/60876811 2016一路有你,2017一起奋斗! 最近共享单车很火,动辄几亿美刀, ...
使用百度地图实现车辆轨迹回放
最近在做的项目有个车辆轨迹回放需求,查资料看到可以使用百度地图的路书功能实现,百度路书功能如下. 点击开始按钮,小车会在地图上移动还原历史轨迹. 具体需求就是通过调用后台接口获取到指定车辆的指定时间段 ...

uni-app实现地图车辆移动轨迹回放

uni-app实现地图车辆移动轨迹回放

轨迹回放部分代码原创博主

uni-app实现地图车辆移动轨迹回放相关推荐

最新文章

热门文章