uniapp-腾讯地图自行车路线规划

腾讯地图自行车路线规划

<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-blue" :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">
			<map :latitude="latitude" :longitude="longitude" show-location :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>
		</view>
	</view>
</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:[],  // 地图上面的标记点
				to:{  // 目的地坐标
					latitude: '',
					longitude: '',
				},
				polyline: [],  // 路线
			}
		},
		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
					}
				})
			},
			// 手动选择目的地
			selectionLocation(){
				uni.chooseLocation({
					success: (e) => {
						// console.log(e)
						this.to.latitude = e.latitude
						this.to.longitude = e.longitude
						this.covers = [{
							latitude: e.latitude,
							longitude: e.longitude,
							width: 20, //宽
							height: 30, //高
							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: 'bicycling',  // 自行车骑行
					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: 4
						}]
					}
				})
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.map{
		width: 100%;
		height: 800rpx;
		margin-top: 10rpx;
		map{
			width: 100%;
			height: 100%;
		}
	}
	.btn{
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
</style>

运行的效果图略