文章目錄

• • 技術(shù)概述
  • 技術(shù)詳述
  • 問(wèn)題與解決
  • 我的總結(jié)
  • 參考文獻(xiàn)

技術(shù)概述

描述這個(gè)技術(shù)是做什么的/什么情況下會(huì)使用到這個(gè)技術(shù)，學(xué)習(xí)該技術(shù)的原因，技術(shù)的難點(diǎn)在哪里。控制在50-100字內(nèi)。

uniapp的map組件中導(dǎo)航路線的展示。是uniapp開發(fā)app時(shí)引入地圖導(dǎo)航的實(shí)現(xiàn)方式。技術(shù)難點(diǎn)在于實(shí)現(xiàn)map組件時(shí)對(duì)于屬性以及函數(shù)的細(xì)節(jié)使用很容易出現(xiàn)一些奇怪的bug。

技術(shù)詳述

描述你是如何實(shí)現(xiàn)和使用該技術(shù)的，要求配合代碼和流程圖詳細(xì)描述。可以再細(xì)分多個(gè)點(diǎn)，分開描述各個(gè)部分。

• 首先是在地圖開發(fā)者平臺(tái)申請(qǐng)地圖的key

key在地圖開發(fā)時(shí)引入地圖時(shí)是必備

• 接著在開發(fā)工具HbuilderX的插件市場(chǎng)安裝插件

在插件市場(chǎng)找到這個(gè)路線規(guī)劃插件，點(diǎn)擊進(jìn)行安裝到開發(fā)工具中。

• 在頁(yè)面的script中引入js文件

import Amap from '@/js/lyn4ever-gaode.js';

• 以上的js文件有兩個(gè)函數(shù)，分別為繪制路線與路線標(biāo)記點(diǎn)函數(shù)

繪制規(guī)劃路線函數(shù)

//繪制規(guī)劃路線 function PlanningRoute(start, end, _waypoints, result, fail) {let that = this;var myAmapFun = new amapFile.AMapWX({key: key});myAmapFun.getDrivingRoute({origin: start,destination: end,waypoints: _waypoints,success: function(data) {var points = [];if (data.paths && data.paths[0] && data.paths[0].steps) {var steps = data.paths[0].steps;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])})}}}result({points: points,color: "#0606ff",width: 8})},fail: function(info) {fail(info)}}) }

路線標(biāo)記點(diǎn)函數(shù)

//標(biāo)記標(biāo)記點(diǎn) function Makemarkers(startpoi, endpoi, waypoints, success) {let markers = [];//起點(diǎn)let start = {iconPath: "@/static/img/log/nav.png",id: 0,longitude: startpoi.split(",")[0],latitude: startpoi.split(",")[1],width: 23,height: 33,callout:{content:'起點(diǎn)',}}markers.push(start)//終點(diǎn)let end = {iconPath: "@/static/img/log/nav.png",id: 1,longitude: endpoi.split(",")[0],latitude: endpoi.split(",")[1],width: 23,height: 33,callout:{content:'終點(diǎn)',}}markers.push(end)//途經(jīng)點(diǎn),先將其分隔成為數(shù)組let _waypoints = waypoints.split(';')for (let i = 0, _len = _waypoints.length; i < _len; i++) {let point = {iconPath: "/static/tjd.png",id: i,longitude: parseFloat(_waypoints[i].split(",")[0]),latitude: parseFloat(_waypoints[i].split(",")[1]),width: 23,height: 33,callout:{content:'途徑點(diǎn)',}}markers.push(point)}success(markers); }

• 接著在script里的showRouter()調(diào)用js里面的兩個(gè)函數(shù)

只要傳入起點(diǎn)與終點(diǎn)的經(jīng)緯度即可在map組件里展示出規(guī)劃路線來(lái)

只要傳入對(duì)應(yīng)的路線途中打點(diǎn)的數(shù)組對(duì)象即可在路線中顯示經(jīng)過(guò)的點(diǎn)。

showRouter(){let that = this;var startPoi = that.longitude+','+that.latitude;var wayPoi ="";var endPoi = that.addressObj.longitude+','+that.addressObj.latitude;Amap.line(startPoi, endPoi, wayPoi,function(res){that.polyline=[];that.polyline.push(res)});Amap.markers(startPoi,endPoi,wayPoi,function(res){that.markers=[];that.markers.push.apply(that.markers,res)}) }

• 效果圖

問(wèn)題與解決

技術(shù)使用中遇到的問(wèn)題和解決過(guò)程。要求問(wèn)題的描述和解決有一定的內(nèi)容，不能草草概括。要讓遇到相關(guān)問(wèn)題的人看了你的博客之后能夠解決該問(wèn)題。

問(wèn)題：

• 導(dǎo)航路線展示后地圖頁(yè)面縮放大小不能很好的控制， 由于展示路線后我們期望地圖視角能夠涵括這個(gè)路線的起始點(diǎn)，這個(gè)問(wèn)題困擾了我很久，解決前，總是在路線規(guī)劃展示后視野僅僅停留在路線的一小部分。解決后，即可完全展示整個(gè)路線的視野。

解決：

• 我根據(jù)路線的起始點(diǎn)之間的距離，利用一個(gè)擬合函數(shù)來(lái)處理地圖scale的大小，這樣就可以調(diào)整好地圖的縮放大小。

通過(guò)請(qǐng)求后端來(lái)返回導(dǎo)航的距離，設(shè)置一個(gè)surface數(shù)組來(lái)存放標(biāo)記值，將距離換算成km后去遍歷surface數(shù)組，當(dāng)距離大于數(shù)組的值時(shí)，將地圖的scale設(shè)置為surface對(duì)應(yīng)下標(biāo)值+5，這樣就可以實(shí)現(xiàn)路線展示后地圖縮放大小的控制了。

uni.request({/* url: 'http://47.95.151.202:8087/getDist/福州大學(xué)/福州三坊七巷', */url: 'http://47.95.151.202:8087/getDist/'+that.myAddress+'/'+that.realAddress,success: (res) => {// 請(qǐng)求成功之后將數(shù)據(jù)給Infovar result = res.data;console.log(that.myAddress);console.log(that.realAddress);if(result.code===200){var surface = [500, 200, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1, 0.05, 0.02];var isset=1;var farthestDistance=result.data/1000;console.log(result.data);for(var i in surface) {if(farthestDistance >surface[i]) {that.myscale = 5 + Number(i);isset=0;break;}}if(isset) that.myscale=16;console.log(that.myscale);};if(result.code===500){uni.showToast({title: '獲取距離錯(cuò)誤，換個(gè)地點(diǎn)試試唄',icon: 'none',});}},fail(err) {res(err);} });

我的總結(jié)

• 通過(guò)此次的地圖學(xué)習(xí)，基本掌握了地圖的實(shí)現(xiàn)方式，導(dǎo)航路線的展示方法，以及map組件的相關(guān)屬性和函數(shù)的使用，收獲頗豐。

參考文獻(xiàn)

uniapp 開發(fā)安卓App引入高德地圖

總結(jié)

以上是生活随笔為你收集整理的uniapp 开发安卓App实现高德地图路线规划导航的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。