移動軌跡 地圖標出移動軌跡
位置詳細接入說明 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>