uniapp 地图行车轨迹

官网地图组件：https://uniapp.dcloud.net.cn/component/map.html
官网地图组件控制：https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext

1、画地图

<map class="positioning-map"id="largeScreenMap":latitude="中心纬度":longitude="中心经度":scale="5":include-points="polyline[0].points":markers="标记点":polyline="路线"@markertap="点击标记点时触发"
></map>

// 地图实例
onReady() {this._mapContext = uni.createMapContext("largeScreenMap", this);
}

2、切换地图中心点

// 获取当前位置uni.getLocation({type: 'wgs84',success: function (res) {let { longitude, latitude } = res// 将地图中心移动到当前定位点，需要配合map组件的show-location使用_this._mapContext.moveToLocation({ longitude: +longitude, latitude: +latitude }) _this.mapCenter = { lat: latitude, lng: longitude }}
});

3、画路线

// 路线
let polyline = [{width: 8,points: [], // 经纬度数组 [{latitude: 0, longitude: 0}]arrowLine: true, //带箭头的线color: '#3591FC', // 线的颜色
}]

4、轨迹移动

// nextPoint 下一个点,moving 是否继续行驶-用于暂停行驶
movePoint(){if(!this.polyline[0] return;let durationTime = Math.ceil(30000 / polyline[0].points.length)	//默认播放全程使用30秒，计算相连两点动画时长this._mapContext.translateMarker({ // 平移marker，带动画duration: durationTime,markerId: '当前标记点的id', destination: { // 指定 marker 移动到的目标点latitude: this.polyline[0].points[this.nextPointIndex].latitude,longitude: this.polyline[0].points[this.nextPointIndex].longitude},animationEnd: res => { // 动画结束回调函数//播放结束，继续移动到下一个点，最后一个点时结束移动if (this.nextPoint < polyline[0].points.length - 1) {this.nextPoint++if (this.moving) {this.movePoint()}} else {this.nextPoint = 1}}
})
}

5、标记点及自定义内容

let marker=[{id: number-必填,latitude: '纬度',longitude: '经度',width: 18, height: 25,callout:{ content: '结束',// 开始bgColor: '#ffffff',padding: 4,borderRadius: 3,display: 'ALWAYS'},// '自定义标记点上方的气泡窗口'- 纯文本内容 - content 显示标记内容，二选一customCallout:{name:'需要的数据',display: 'BYCLICK'},// '自定义气泡窗口' - 自定义窗口内容 - 使用cover-view覆盖 ，二选一}
]

自定义气泡窗口参考：uniapp map自定义气泡窗