腾讯地图步行路线规划
<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: 'walking', // 步行
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]
})
}
// 设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
that.polyline = [{
points: pl,
color: '#b8ff13dd',
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>
运行展示