uniapp小程序使用高德地图api实现路线规划
Posted on 2023-01-10 11:18 书中枫叶 阅读(1387) 评论(3) 编辑 收藏 举报路线规划
简介
路线规划常用于出行路线的提前预览，我们提供4种类型的路线规划，分别为：驾车、步行、公交和骑行，满足各种的出行场景。
高德开放平台
本例是驾车路线规划功能和位置选择地图api:chooseLocation
示例：
1、在页面的 js 文件中，实例化 AMapWX 对象，请求进行驾车路线规划。
首先，引入 amap-wx.js 文件（amap-wx.js 从相关下载页面下载的 zip 文件解压后得到）。
| import amapFile from "@/libs/amap-wx.js"; |
然后在 onl oad 实例化 AMapWX 对象
| onLoad() { | |
| this.myAmapFunT = new amapFile.AMapWX({ | |
| key: 你申请的key | |
| }) | |
| }, |
最后生成请求进行驾车路线规划数据
| /** | |
| *@author ZY | |
| *@date 2023/1/9 | |
| *@Description:生成规划路线 | |
| *@param {string} start 开始位置 | |
| *@param {string} end 结束位置 | |
| *@param {number} strategy 10 默认多策略 策略 https://lbs.amap.com/api/webservice/guide/api/direction#driving | |
| * | |
| 10，返回结果会躲避拥堵，路程较短，尽量缩短时间，与高德地图的默认策略也就是不进行任何勾选一致 | |
| * 4，躲避拥堵，但是可能会存在绕路的情况，耗时可能较长 | |
| 2，距离优先，仅走距离最短的路线，但是可能存在穿越小路/小区的情况 | |
| */ | |
| getPlanningRoute(start, end, strategy = 10) { | |
| let that = this | |
| uni.showLoading({ | |
| title: '加载中' | |
| }); | |
| that.myAmapFunT.getDrivingRoute({ | |
| origin: start, | |
| destination: end, | |
| strategy: strategy, //备选方案 | |
| success: function(data) { | |
| // console.log('所有路径',data) | |
| if (data.paths && data.paths[0] && data.paths[0].steps) { | |
| // 默认 10 会 对返回多条路径的方案 按照时间短的 | |
| let goodRouter = data.paths.sort((a, b) => { | |
| return a.duration - b.duration | |
| })[0] | |
| that.distance = (goodRouter.distance * 0.001).toFixed(2) + '公里' | |
| that.duration = '大约' + (goodRouter.duration / 60).toFixed(2) + '分钟' | |
| let steps = goodRouter.steps | |
| let points = [] | |
| for (var i = 0; i < steps.length; i++) { | |
| var poLen = steps[i].polyline.split(';'); | |
| for (var j = 0; j < poLen.length; j++) { | |
| points.push({ | |
| longitude: parseFloat(poLen[j].split(',')[0]), | |
| latitude: parseFloat(poLen[j].split(',')[1]) | |
| }) | |
| } | |
| } | |
| that.polyline = [{ | |
| points: points, | |
| color: strategy === 10 ? '#0ee532' : strategy === 2 ? '#0742d9' : | |
| '#ee6b06', | |
| width: 8, | |
| }] | |
| } | |
| uni.hideLoading(); | |
| }, | |
| fail: function(info) { //失败回调 | |
| console.log('路线规划失败') | |
| console.log(info) | |
| uni.hideLoading(); | |
| uni.showToast({ | |
| title: '路线规划失败', | |
| icon: 'error' | |
| }); | |
| }, | |
| }) | |
| }, |
2.完整源码组件
| <template> | |
| <view class="content"> | |
| <view class="back-button" @click="toBack"> | |
| <image src="http://img.wisdomtaxi.com/toBack.png" style="width: 100%; height: 100%;"></image> | |
| </view> | |
| <map class="order-map" :latitude="startPoint.latitude" :longitude="startPoint.longitude" show-location | |
| :polyline="polyline" @markertap="markertap" :key="polyline.length + new Date().getTime()" | |
| :markers="markers"> | |
| <cover-view slot="callout"> | |
| <block v-for="(item,index) in markers" :key="index"> | |
| <cover-view class="customCallout" :marker-id="item.id"> | |
| <cover-view class="customCalloutContent"> | |
| {{item.title}} | |
| </cover-view> | |
| </cover-view> | |
| </block> | |
| </cover-view> | |
| </map> | |
| <view class="order-box"> | |
| <view class="search-start" v-if="endPoint.address"> | |
| <view class="custom-style" v-for="item in btnList" :key="item.value" | |
| :class="{active:flag === item.value}" @click="selectRouteType(item.value)"> | |
| {{item.name}} | |
| </view> | |
| </view> | |
| <view class="search-start" v-if="distance || duration"> | |
| <u-icon name="file-text-fill" color="#FFA500" size="17"></u-icon> | |
| <view class="start-name"> | |
| 距离：{{distance}} 时间：{{duration}} | |
| </view> | |
| </view> | |
| <view class="search-start"> | |
| <u-icon name="map-fill" color="#33a63b" size="17"></u-icon> | |
| <view class="start-name"> | |
| 您将在 <text style="color: #33a63b">{{startPoint.name | fmtEndAddr}}</text> 上车 | |
| </view> | |
| </view> | |
| <view class="search-start" v-if="endPoint.name"> | |
| <u-icon name="map-fill" color="#ee642b" size="17"></u-icon> | |
| <view class="start-name"> | |
| {{endPoint.name|fmtEndAddr}} | |
| </view> | |
| </view> | |
| <view class="search-box" @click="openChooseLocation"> | |
| <u-icon name="search" color="#ffa602" size="23"></u-icon> | |
| <view class="search-placeholder"> | |
| 请选择目的地 | |
| </view> | |
| </view> | |
| <view v-if="endPoint.name" @click="submitToDriver" class="send-btn"> | |
| 发送给司机 | |
| </view> | |
| </view> | |
| </view> | |
| </template> | |
| <script> | |
| import uniIcons from "@/components/uni-icons/uni-icons.vue"; | |
| import amapFile from "@/libs/amap-wx.js"; | |
| export default { | |
| components: { | |
| uniIcons | |
| }, | |
| data() { | |
| return { | |
| markers: [], | |
| tripInfo: {}, | |
| polyline: [], | |
| startPoint: { | |
| latitude: 26.56045894387685, //纬度 | |
| longitude: 106.68005128661751, //经度 | |
| name: '', | |
| address: '' | |
| }, | |
| endPoint: {}, | |
| myAmapFunT: null, | |
| distance: 0, //距离 | |
| duration: 0, //时间 | |
| flag: 10, | |
| btnList: [{ | |
| name: '推荐', | |
| value: 10 | |
| }, | |
| { | |
| name: '躲避拥堵', | |
| value: 4 | |
| }, | |
| { | |
| name: '距离短', | |
| value: 2 | |
| }, | |
| ] | |
| } | |
| }, | |
| filters: { | |
| fmtEndAddr(val) { | |
| if (val === null || val === '' || val === undefined) { | |
| return '未知地址'; | |
| } | |
| return val; | |
| }, | |
| }, | |
| onl oad() { | |
| this.myAmapFunT = new amapFile.AMapWX({ | |
| key: 你申请的key | |
| }) | |
| this.getCurrentLocation(); | |
| }, | |
| methods: { | |
| //返回 | |
| toBack() { | |
| uni.navigateBack({}); | |
| }, | |
| //获取当前定位 | |
| getCurrentLocation() { | |
| let that = this | |
| uni.getLocation({ | |
| type: 'gcj02', | |
| success: function(res) { | |
| // console.log('当前：' , res); | |
| // console.log('当前位置的经度：' + res.longitude); | |
| // console.log('当前位置的纬度：' + res.latitude); | |
| that.startPoint.longitude = res.longitude; | |
| that.startPoint.latitude = res.latitude; | |
| that.getAddress(that.startPoint.longitude + ',' + that.startPoint.latitude) | |
| } | |
| }); | |
| }, | |
| // 解析地址 | |
| getAddress(loc) { | |
| var that = this; | |
| var myAmapFun = this.myAmapFunT | |
| if (loc !== null && loc !== '' && loc !== undefined) { | |
| myAmapFun.getRegeo({ | |
| iconPath: 'http://img.wisdomtaxi.com/amap_icon.png', | |
| width: '37.5rpx', | |
| height: '37.5rpx', | |
| location: loc, | |
| success: function(data) { //成功回调 | |
| // console.log('地址解析',data) | |
| that.startPoint.name = data[0].name | |
| that.startPoint.address = data[0].desc | |
| that.initMap() | |
| }, | |
| fail: function(info) { //失败回调 | |
| console.log(info) | |
| }, | |
| }); | |
| } | |
| }, | |
| //初始化地图数据 | |
| initMap() { | |
| this.markers.push({ | |
| id: 1, | |
| latitude: this.startPoint.latitude, //纬度 | |
| longitude: this.startPoint.longitude, //经度 | |
| iconPath: '/static/images/home/start.png', //显示的图标 | |
| rotate: 0, // 旋转度数 | |
| width: 30, //宽 | |
| height: 30, //高 | |
| title: this.startPoint.name, //标注点名 | |
| // alpha: 0.5, //透明度 | |
| joinCluster: true, | |
| customCallout: { | |
| anchorY: 0, | |
| anchorX: 0, | |
| display: "ALWAYS", | |
| }, | |
| }, ) | |
| }, | |
| /** | |
| *@author ZY | |
| *@date 2023/1/9 | |
| *@Description:选择位置 | |
| *@param {Object} opt https://uniapp.dcloud.net.cn/api/location/location.html | |
| * | |
| opt : { | |
| latitude Number 否 目标地纬度 | |
| longitude Number 否 目标地经度 | |
| } | |
| */ | |
| openChooseLocation(opt) { | |
| let that = this | |
| uni.chooseLocation({ | |
| latitude: opt?.latitude || that.startPoint.latitude, | |
| longitude: opt?.longitude || that.startPoint.longitude, | |
| success: function(res) { | |
| // console.log(res) | |
| // console.log('位置名称：' + res.name); | |
| // console.log('详细地址：' + res.address); | |
| // console.log('纬度：' + res.latitude); | |
| // console.log('经度：' + res.longitude); | |
| if (!res.name) { | |
| return uni.showToast({ | |
| title: '请重新选择位置', | |
| icon: 'none' | |
| }); | |
| } | |
| //设置终点 | |
| that.endPoint = { | |
| longitude: res.longitude, | |
| latitude: res.latitude, | |
| name: res.name, | |
| address: res.address | |
| } | |
| //设置终点标记 | |
| that.markers[1] = { | |
| id: 2, | |
| latitude: res.latitude, //纬度 | |
| longitude: res.longitude, //经度 | |
| iconPath: '/static/images/home/endd.png', //显示的图标 | |
| rotate: 0, // 旋转度数 | |
| width: 30, //宽 | |
| height: 30, //高 | |
| title: res.name, //标注点名 | |
| // alpha: 0.5, //透明度 | |
| joinCluster: true, | |
| customCallout: { | |
| anchorY: 0, | |
| anchorX: 0, | |
| display: "ALWAYS" | |
| }, | |
| } | |
| let start = that.startPoint.longitude + ',' + that.startPoint.latitude | |
| let end = res.longitude + ',' + res.latitude | |
| //每次选取位置完成后都会默认 10 策略 | |
| that.flag = 10 | |
| //生成规划路线 | |
| that.getPlanningRoute(start, end, 10) | |
| }, | |
| fail: function(info) { //失败回调 | |
| console.log('调取失败') | |
| console.log(info) | |
| }, | |
| }) | |
| }, | |
| // 按钮选择策略 | |
| selectRouteType(idx) { | |
| this.flag = idx | |
| let start = this.startPoint.longitude + ',' + this.startPoint.latitude | |
| let end = this.endPoint.longitude + ',' + this.endPoint.latitude | |
| this.getPlanningRoute(start, end, idx) | |
| }, | |
| /** | |
| *@author ZY | |
| *@date 2023/1/9 | |
| *@Description:生成规划路线 | |
| *@param {string} start 开始位置 | |
| *@param {string} end 结束位置 | |
| *@param {number} strategy 10 默认多策略 策略 https://lbs.amap.com/api/webservice/guide/api/direction#driving | |
| * | |
| 10，返回结果会躲避拥堵，路程较短，尽量缩短时间，与高德地图的默认策略也就是不进行任何勾选一致 | |
| * 4，躲避拥堵，但是可能会存在绕路的情况，耗时可能较长 | |
| 2，距离优先，仅走距离最短的路线，但是可能存在穿越小路/小区的情况 | |
| */ | |
| getPlanningRoute(start, end, strategy = 10) { | |
| let that = this | |
| uni.showLoading({ | |
| title: '加载中' | |
| }); | |
| that.myAmapFunT.getDrivingRoute({ | |
| origin: start, | |
| destination: end, | |
| strategy: strategy, //备选方案 | |
| success: function(data) { | |
| // console.log('所有路径',data) | |
| if (data.paths && data.paths[0] && data.paths[0].steps) { | |
| // 默认 10 会 对返回多条路径的方案 按照时间短的 | |
| let goodRouter = data.paths.sort((a, b) => { | |
| return a.duration - b.duration | |
| })[0] | |
| that.distance = (goodRouter.distance * 0.001).toFixed(2) + '公里' | |
| that.duration = '大约' + (goodRouter.duration / 60).toFixed(2) + '分钟' | |
| let steps = goodRouter.steps | |
| let points = [] | |
| for (var i = 0; i < steps.length; i++) { | |
| var poLen = steps[i].polyline.split(';'); | |
| for (var j = 0; j < poLen.length; j++) { | |
| points.push({ | |
| longitude: parseFloat(poLen[j].split(',')[0]), | |
| latitude: parseFloat(poLen[j].split(',')[1]) | |
| }) | |
| } | |
| } | |
| that.polyline = [{ | |
| points: points, | |
| color: strategy === 10 ? '#0ee532' : strategy === 2 ? '#0742d9' : | |
| '#ee6b06', | |
| width: 8, | |
| }] | |
| } | |
| uni.hideLoading(); | |
| }, | |
| fail: function(info) { //失败回调 | |
| console.log('路线规划失败') | |
| console.log(info) | |
| uni.hideLoading(); | |
| uni.showToast({ | |
| title: '路线规划失败', | |
| icon: 'error' | |
| }); | |
| }, | |
| }) | |
| }, | |
| // 点击标记点 | |
| markertap(e) { | |
| let opt = this.markers.find(el => { | |
| return el.id === e.detail.markerId | |
| }) | |
| this.openChooseLocation(opt) | |
| }, | |
| // 提交给司机 | |
| submitToDriver() { | |
| let p = {} | |
| p.idCard = uni.getStorageSync('driverInfo').idCard || '' | |
| p.startLocation = this.startPoint.longitude + ',' + this.startPoint.latitude | |
| p.startAddr = this.startPoint.name || '未知' | |
| p.endLocation = this.endPoint.longitude + ',' + this.endPoint.latitude | |
| p.endAddr = this.endPoint.name || '未知' | |
| p.plan = this.flag || 10 | |
| p.locations = this.polyline[0].points || [] | |
| if (!p.idCard) { | |
| return uni.showToast({ | |
| title: '司机信息获取失败', | |
| icon: 'none' | |
| }); | |
| } | |
| uni.showLoading({ | |
| title: '提交中' | |
| }); | |
| let that = this | |
| this.request('api_sendDestination', p).then(res => { | |
| uni.hideLoading(); | |
| uni.showToast({ | |
| title: '发送成功' | |
| }) | |
| setTimeout(()=>{ | |
| that.toBack() | |
| },1000) | |
| }).catch(err => { | |
| console.log(err) | |
| uni.hideLoading(); | |
| uni.showToast({ | |
| title: '发送失败', | |
| icon: 'error' | |
| }) | |
| }) | |
| } | |
| }, | |
| } | |
| </script> | |
| <style lang="scss" scoped> | |
| .content { | |
| display: flex; | |
| flex-direction: column; | |
| text-align: center; | |
| align-content: center; | |
| background: #f5f5f9; | |
| height: 1600rpx; | |
| } | |
| .back-button { | |
| z-index: 9; | |
| position: fixed; | |
| top: 95rpx; | |
| left: 30rpx; | |
| height: 50rpx; | |
| width: 50rpx; | |
| border-radius: 50%; | |
| background-color: #FFA500; | |
| /* box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2); */ | |
| } | |
| .order-map { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .order-box { | |
| position: fixed; | |
| bottom: 0rpx; | |
| left: 0rpx; | |
| width: 100%; | |
| //height: 435rpx; | |
| text-align: left; | |
| background-color: #FFFFFF; | |
| border-top-right-radius: 10rpx; | |
| border-top-left-radius: 10rpx; | |
| box-sizing: border-box; | |
| padding: 18rpx; | |
| padding-bottom: 80rpx; | |
| box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2); | |
| .send-btn { | |
| margin-top: 30rpx; | |
| width: 100%; | |
| color: white; | |
| background-color: #ffa602; | |
| padding: 0 24rpx; | |
| font-size: 28rpx; | |
| height: 80rpx; | |
| line-height: 80rpx; | |
| box-sizing: border-box; | |
| border-radius: 12rpx; | |
| text-align: center; | |
| } | |
| /*box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2);*/ | |
| .search-start { | |
| font-size: 30rpx; | |
| margin: 18rpx 0; | |
| padding-left: 15rpx; | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| box-sizing: border-box; | |
| .start-name { | |
| width: 550rpx; | |
| padding-left: 10rpx; | |
| overflow: hidden; | |
| /*文本不会换行*/ | |
| white-space: nowrap; | |
| /*当文本溢出包含元素时，以省略号表示超出的文本*/ | |
| text-overflow: ellipsis; | |
| } | |
| .custom-style { | |
| margin-right: 10rpx; | |
| border-radius: 6rpx; | |
| border: 1rpx solid #ebedf0; | |
| font-size: 24rpx; | |
| padding: 8rpx 24rpx; | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| &.active { | |
| color: #FFFFFF; | |
| background-color: #ffa602; | |
| border-color: #ffa602; | |
| } | |
| } | |
| } | |
| .search-box { | |
| background-color: #f3f3f3; | |
| border-radius: 36rpx; | |
| height: 80rpx; | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| box-sizing: border-box; | |
| padding: 0 25rpx; | |
| .search-placeholder { | |
| font-size: 28rpx; | |
| color: #bbb9b9; | |
| padding-left: 15rpx; | |
| } | |
| } | |
| } | |
| .addH { | |
| height: 420rpx; | |
| /*+100*/ | |
| } | |
| .row { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .bot { | |
| margin-bottom: 10rpx; | |
| } | |
| .license { | |
| position: relative; | |
| left: 30rpx; | |
| height: 110rpx; | |
| font-weight: bold; | |
| font-size: 38rpx; | |
| line-height: 130rpx; | |
| letter-spacing: 1.125rpx; | |
| /* border: 0.01rem solid #555555; */ | |
| } | |
| .time-icon { | |
| height: 16rpx; | |
| width: 16rpx; | |
| position: relative; | |
| left: 190rpx; | |
| top: 59rpx; | |
| } | |
| .time-text { | |
| height: 110rpx; | |
| line-height: 130rpx; | |
| position: relative; | |
| left: 200rpx; | |
| font-size: 30rpx; | |
| color: #666666; | |
| /* border: 0.01rem solid #555555; */ | |
| } | |
| .route-icon { | |
| height: 12rpx; | |
| width: 12rpx; | |
| position: relative; | |
| left: 42rpx; | |
| top: 30rpx; | |
| } | |
| .route-text { | |
| height: 65rpx; | |
| width: 478rpx; | |
| line-height: 65rpx; | |
| position: relative; | |
| left: 50rpx; | |
| font-size: 30rpx; | |
| color: #666666; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| /* border: 0.01rem solid #555555; */ | |
| } | |
| .amt-box { | |
| width: calc(100% - 558rpx); | |
| margin-left: 40rpx; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: flex-start; | |
| align-items: center; | |
| /* border: 1rpx solid #555555; */ | |
| } | |
| .amt-icon { | |
| margin-top: 5rpx; | |
| line-height: 65rpx; | |
| height: 20rpx; | |
| width: 20rpx; | |
| } | |
| .amt { | |
| margin-left: 10rpx; | |
| line-height: 65rpx; | |
| /*line-height: 80rpx;*/ | |
| font-size: 30rpx; | |
| color: #666666; | |
| } | |
| .todo { | |
| position: relative; | |
| height: 165rpx; | |
| width: 640rpx; | |
| margin-left: 30rpx; | |
| border-top: 0.375rpx solid #E9EAEC; | |
| } | |
| .todo-item { | |
| height: 100%; | |
| width: 50%; | |
| text-align: center; | |
| align-content: center; | |
| /* border: 0.01rem solid #555555; */ | |
| } | |
| .todo-item>image { | |
| height: 60rpx; | |
| width: 60rpx; | |
| margin-top: 30rpx; | |
| } | |
| .todo-item>view { | |
| color: #3F3F3F; | |
| font-size: 30rpx; | |
| letter-spacing: 0.375rpx; | |
| /* border: 0.01rem solid #555555; */ | |
| } | |
| </style> | |
| <style> | |
| /* *************************************** */ | |
| .customCallout { | |
| box-sizing: border-box; | |
| background-color: #fff; | |
| border: 1px solid #ccc; | |
| border-radius: 30px; | |
| padding: 5px 10px; | |
| } | |
| .customCalloutContent { | |
| font-size: 20rpx; | |
| word-wrap: break-word; | |
| } | |
| </style> | |
本文来自博客园，作者：书中枫叶，转载请注明原文链接：https://www.cnblogs.com/zy-mg/p/17039609.html
分类: 博客 标签: js, vue.js, 地图 标签：uniapp,res,longitude,height,api,latitude,uni,border,高德 From： https://www.cnblogs.com/sexintercourse/p/17305545.html