案例二---移动轨迹---实时和静态
移动轨迹 地图标出移动轨迹
位置详细接入说明 https://blog.csdn.net/qq_42027681/article/details/113405971
如果打不开可能还在审核
移动轨迹
- 说明
- 静态
-
- 动态
说明
静态就是获取移动的点位数组 画图
动态实时获取位置 可以压缩点位进行绘制 这里不压缩
压缩移步 腾讯位置服务 路径规划 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection
静态
<template>
<view>
<map id="myMap" style="width: 100%; height: 100vh" :markers="markers" :longitude="fromP.longitude" :latitude="fromP.latitude"
scale='18' :polyline="polyline" show-location>
</map>
</view>
</template>
<script>
export default {
data() {
return {
fromP: {
longitude: 115.101399,
latitude: 33.415668
},
endP: {
longitude: 115.101399,
latitude: 33.415668
},
polyline: [],
markers: []
}
},
onLoad() {
this.test()
},
methods: {
test() {
let vm = this;
//模拟实时获取位置
let ports = [{
latitude: 33.415668,
longitude: 115.101399
}, {
latitude: 33.415834,
longitude: 115.101603
}, {
latitude: 33.415811,
longitude: 115.101877
}, {
latitude: 33.415905,
longitude: 115.102370
}, {
latitude: 33.416389,
longitude: 115.101802
}, {
latitude: 33.416232,
longitude: 115.101603
}, {
latitude: 33.416196,
longitude: 115.101448
}, {
latitude: 33.416192,
longitude: 115.101383
}, {
latitude: 33.416277,
longitude: 115.101265
}, {
latitude: 33.416026,
longitude: 115.101115
}, {
latitude: 33.415941,
longitude: 115.100804
}];
let lasts = ports.length;
let startS = ports[0]
let endD = ports[lasts - 1]
vm.endP = endD
let mks = []
console.log(ports)
mks.push({
title: "起点",
id: 1,
latitude: startS.latitude,
longitude: startS.longitude,
callout: {
content: "这里是起点",
borderColor: 'blue'
},
label: {
content: "起点"
}, //地图显示内容
iconPath: "../../../static/startP.png"
}, {
title: "终点",
id: 2,
latitude: endD.latitude,
longitude: endD.longitude,
callout: {
content: "这里是终点",
borderColor: 'blue'
},
label: {
content: "终点"
}, //地图显示内容
iconPath: "../../../static/endP.png"
})
vm.markers = mks;
let colors = [];
function getRandomColor() {
let colors = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
colors.push(color)
}
return '#' + colors.join('')
}
for (let j = 0; j < ports.length; j++) {
let stro = getRandomColor()
colors.push(stro)
}
let colorLists = colors
console.log(colorLists)
// Math.floor(Math.random()*10);
// var ranNum = Math.ceil(Math.random() * 25);
vm.polyline = [{
points: ports,
// color: '#FF0000DD',
//这里可以随机生成
colorList: colors, // ['#ffff00','#0f1bff','#ffc859','#ff1770','#ff0000','#e28aff','#00aa00','#55ff7f','#0651ff','#000000',]
arrowLine: true,
width: 5,
borderColor: "#ffff00"
}]
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
动态
<template>
<view>
<view class="content"><button :type="types" @click="test()">{
{
stText}}</button>当前速度:{
{
speed}}</view>
<map id="myMap" style="width: 100%; height: 90vh" :markers="markers" :longitude="fromP.longitude" :latitude="fromP.latitude"
scale='18' :polyline="polyline" show-location>
</map>
</view>
</template>
<script>
export default {
data() {
return {
polyline: [{
points: [],
color: '#FF0000DD',
width: 5
}],
speed: 0,
fromP: {
latitude: 0,
longitude: 0
},
markers: [],
isD: false,
stText: "开始运动",
types: "primary",
timer: ""
}
},
onLoad() {
let vm = this;
uni.getLocation({
type: 'gcj02',
success: res => {
console.log(res)
vm.fromP.latitude = res.latitude;
vm.fromP.longitude = res.longitude;
}
})
},
methods: {
test() {
let vm = this;
if (vm.isD) {
vm.isD = !vm.isD;
vm.stText = "开始运动"
vm.types = "primary"
clearInterval(vm.timer)
vm.speed = 0
} else {
vm.isD = !vm.isD;
vm.stText = "暂停"
vm.types = "warn"
vm.timer = setInterval(function() {
uni.getLocation({
type: 'gcj02',
success: res => {
vm.speed = res.speed
vm.polyline[0].points.push({
latitude: res.latitude,
longitude: res.longitude
})
let portss = vm.polyline[0].points
let mks = [];
mks.push({
title: "起点",
id: 1,
latitude: portss[0].latitude,
longitude: portss[0].longitude,
callout: {
content: "这里是起点",
borderColor: 'blue'
},
label: {
content: "起点"
}, //地图显示内容
iconPath: "../../../static/startP.png"
}, {
title: "目前",
id: 2,
latitude: portss[portss.length - 1].latitude,
longitude: portss[portss.length - 1].longitude,
callout: {
content: "这里是终点",
borderColor: 'blue'
},
label: {
content: "目前"
}, //地图显示内容
iconPath: "../../../static/logos.png"
})
vm.markers = mks;
}
})
}, 200)
}
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>