腾讯地图路线轨迹回放
<template>
<div>
<cu-custom bgColor="bg-gradual-green" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">路线轨迹</block>
</cu-custom>
<view class="notice">
<u-notice-bar :text="text"></u-notice-bar>
</view>
<view class="map-container">
<map id="map" class="map" :latitude="latitude" :longitude="longitude" :show-location="false" :markers="covers" :polyline="polyline"></map>
</view>
<view class="btn">
<button type="primary" size="mini" @click="selectionLocation">手动选择目的地</button>
<button type="warn" size="mini" @click="routePlanning">开始驾车路线规划</button>
<button type="primary" size="mini" @click="carshow">显示小车</button>
<button type="primary" size="mini" @click="routerTrack">轨迹模拟运行</button>
</view>
</div>
</template>
<script>
// 引入SDK核心类,地图组件
import QQMapWX from '../components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
export default{
data(){
return{
qqmapsdk:{}, // 腾讯地图小程序的SDK
text: '路线轨迹,带小车图标', // 滚动通知
latitude: '', // 纬度
longitude: '', // 经度
covers:[], // 地图上面的标记点
form:{ // 初始地
latitude: '',
longitude: '',
},
to:{ // 目的地坐标
latitude: '',
longitude: '',
},
polyline: [], // 路线
map: null, // 创建的map对象
index:0,
}
},
onReady() {
// 创建map对象
this.map = uni.createMapContext('map')
},
onLoad() {
// 实例化API核心类
this.qqmapsdk = new QQMapWX({
key: '' // 自己申请的key值
})
// 获取用户当前的位置
this.getUserLocation()
},
methods:{
// 获取用户当前的位置
getUserLocation(){
uni.getLocation({
type:'gcj02',
success: (e) => {
this.latitude = e.latitude
this.longitude = e.longitude
this.form.latitude = e.latitude
this.form.longitude = e.longitude
this.covers.push({
latitude: e.latitude,
longitude: e.longitude,
width: 20, //宽
height: 30, //高
iconPath: require('./assets/start.png'),
})
}
})
},
// 手动选择目的地
selectionLocation(){
uni.chooseLocation({
success: (e) => {
this.to.latitude = e.latitude
this.to.longitude = e.longitude
this.covers.push({
latitude: e.latitude,
longitude: e.longitude,
width: 20, //宽
height: 30, //高
iconPath: require('./assets/end.png'),
label:{
content: e.name,
color: '#ffffff',
fontSize: 14,
boderRadius: 2,
bgColor: '#00c16f',
display: 'ALWAYS',
padding: 5,
anchorX: 0,
anchorY:-60,
}
})
}
})
},
// 驾车路线规划
routePlanning(){
let that = this
that.qqmapsdk.direction({
mode: 'driving', // 驾车
from:{ // 起始位置(当前位置)坐标
latitude: that.latitude,
longitude: that.longitude
},
to: that.to, // 目的地位置坐标
success(res){
// console.log(res)
var coors = res.result.routes[0].polyline
var pl = [] // 点串数组
// 坐标解压(返回的点串坐标,通过前向差分进行压缩)
var kr = 1000000
for(var i = 2; i < coors.length;i++){
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr
}
// 将解压后的坐标放入点串数组pl中
for(var i = 0; i < coors.length; i += 2){
pl.push({
latitude: coors[i],
longitude: coors[i + 1]
})
}
// console.log('点串数组',pl)
// 设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
that.polyline = [{
points: pl,
color: '#352effdd', // 线的填充色
width: 6, // 折现宽度
borderWidth: 3, // 边线宽度
borderColor: '#aaffff', // 边线颜色
lineCap: 'square', // 线端头
showArrow: true, // 沿线路方向显示箭头
}]
}
})
},
// 显示小车
carshow(){
// 显示小车
this.covers.push({
id: 2,
width: 32,
height: 32,
latitude: this.form.latitude,
longitude: this.form.longitude,
// iconPath: require('./assets/car.png'),
iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
anchor: {
x: 0.5,
y: 0.5,
},
})
},
// 轨迹模拟运行
routerTrack(){
let that = this
let polylength = that.polyline[0].points.length
let data = that.polyline[0].points[that.index]
that.map.translateMarker({
markerId: 2,
autoRotate: true, // 移动过程中自动旋转marker
rotate:15, // marker旋转角度
destination:{
latitude:data.latitude, // 车辆即将移动到的下一个纬度
longitude: data.longitude // 车辆即将移动到的下一个经度
},
moveWithRotate: true, // 小车平移与旋转同时进行
duration: 800,
complete:function(){
that.index++
if(that.index < polylength) {
that.routerTrack()
}else{
uni.showToast({
icon:'none',
duration:1500,
title:'小车移动完毕😊'
})
// that.index = 0
}
},
animationEnd:function(){
that.index++
if(that.index < polylength) {
that.routerTrack()
}else{
uni.showToast({
icon:'none',
duration:1500,
title:'小车移动完毕😊'
})
// that.index = 0
}
},
fail(err){
uni.showToast({
icon:'none',
duration:1500,
title:'小车移动失败😒'
})
}
})
}
}
}
</script>
<style>
page{
width: 100%;
height: 100%;
}
</style>
<style lang="scss" scoped>
.map-container{
width: 100%;
height: 800rpx;
margin-top: 10rpx;
map{
width: 100%;
height: 100%;
}
}
.btn{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
button{
margin-top: 20rpx;
width: 40%;
}
}
</style>
运行示例略