技術標籤：位置服務定位位置服務小程式uni-appvue

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