uniapp腾讯地图规划线路

<template>
	<view>
		<map :longitude="longitude" :latitude="latitude" :markers="markers" :polyline="polyline"
			style="width: 100%; height: 100vh;"></map>
	</view>
</template>

<script>
	const QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
	export default {
		data() {
			return {
				longitude: 121.46196, // 经度
				latitude: 31.222352, // 纬度
				markers: [], // 标记点
				polyline: [], // 线路
				qqmapsdk: null,
			}
		},
		onReady() {
			this.qqmapsdk = new QQMapWX({
				key: '5555555555555555' // 必填
			});
			console.log('进来了开始执行代码');
			// https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection 腾讯地图api
			this.qqmapsdk.direction({
				mode: 'driving',
				from: {
					latitude: this.latitude,
					longitude: this.longitude
				},
				to: {
					latitude: 39.908860,
					longitude: 116.397390
				},
				success: (res) => {
					let polyline = [];
					//坐标解压(返回的点串坐标,通过前向差分进行压缩)
					let list = []
					var coors = res.result.routes[0].polyline;
					for (var i = 2; i < coors.length; i++) {
						coors[i] = coors[i - 2] + coors[i] / 1000000;
						list.push(coors[i])
					}
					console.log('list:',list);
					for (var i = 0; i < list.length; i += 2) {
						var lat = list[i];
						var lng = list[i + 1];
						polyline.push({
							latitude: lat,
							longitude: lng,
						});
					}
					// https://developers.weixin.qq.com/miniprogram/dev/component/map.html#%E5%8A%9F%E8%83%BD%E6%8F%8F%E8%BF%B0
					// 微信小程序api
					this.polyline = [{
						points: polyline,//线的经纬度数组
						color: '#FF0000DD',//划线的颜色
						width: 4,//线条粗细
						dottedLine: false,
						arrowLine: true
					}]
				},
				fail: (error) => {
					console.log(error)
				}
			})
		},
		methods: {
			aaa() {
				// 获取当前位置
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('res:', res);
						this.longitude = res.longitude
						this.latitude = res.latitude
						this.markers.push({
							id: 0,
							longitude: res.longitude,
							latitude: res.latitude,
							iconPath: '/static/logo.jpg',
							width: 32,
							height: 32
						})
					},
					fail(err) {
						console.log('err', err);
					}
				})
			},
		}
	}
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

源码地址

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值