案例二---移动轨迹---实时和静态

迷南。 2022-10-25 01:18 81阅读 0赞

> 移动轨迹 地图标出移动轨迹  
> 位置详细接入说明 [https://blog.csdn.net/qq\_42027681/article/details/113405971][https_blog.csdn.net_qq_42027681_article_details_113405971]  
> 如果打不开可能还在审核  
> ![在这里插入图片描述][20210130140559286.jpg]

### 移动轨迹 ###

*  说明
 *  静态
 *   *  动态

# 说明 #

> 静态就是获取移动的点位数组 画图  
> 动态实时获取位置 可以压缩点位进行绘制 这里不压缩  
> 压缩移步 腾讯位置服务 路径规划 [https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection][https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_methodDirection]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]

# 静态 #

<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>

[https_blog.csdn.net_qq_42027681_article_details_113405971]: https://blog.csdn.net/qq_42027681/article/details/113405971
[20210130140559286.jpg]: /images/20221024/730280c729b94d19a8b2644b4a8b66f9.png
[https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_methodDirection]: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221024/16ef80d0c4fb435ea7517abed90d4132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221024/0ed8963ed0124af3ab3e15fc03bff38b.png