uniapp開發(fā)安卓App實(shí)現(xiàn)高德地圖路線規(guī)劃導(dǎo)航功能的全過程
技術(shù)概述
描述這個(gè)技術(shù)是做什么的/什么情況下會(huì)使用到這個(gè)技術(shù)，學(xué)習(xí)該技術(shù)的原因，技術(shù)的難點(diǎn)在哪里?？刂圃?0-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ā)工具中。
在頁面的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ī)劃路線來
只要傳入對(duì)應(yīng)的路線途中打點(diǎn)的數(shù)組對(duì)象即可在路線中顯示經(jīng)過的點(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)
})
}
效果圖
問題與解決
技術(shù)使用中遇到的問題和解決過程。要求問題的描述和解決有一定的內(nèi)容，不能草草概括。要讓遇到相關(guān)問題的人看了你的博客之后能夠解決該問題。
問題：
導(dǎo)航路線展示后地圖頁面縮放大小不能很好的控制， 由于展示路線后我們期望地圖視角能夠涵括這個(gè)路線的起始點(diǎn)，這個(gè)問題困擾了我很久，解決前，總是在路線規(guī)劃展示后視野僅僅停留在路線的一小部分。解決后，即可完全展示整個(gè)路線的視野。
解決：
我根據(jù)路線的起始點(diǎn)之間的距離，利用一個(gè)擬合函數(shù)來處理地圖scale的大小，這樣就可以調(diào)整好地圖的縮放大小。
通過請(qǐng)求后端來返回導(dǎo)航的距離，設(shè)置一個(gè)surface數(shù)組來存放標(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ù)給Info
var 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é) 通過此次的地圖學(xué)習(xí)，基本掌握了地圖的實(shí)現(xiàn)方式，導(dǎo)航路線的展示方法，以及map組件的相關(guān)屬性和函數(shù)的使用，收獲頗豐。
參考文獻(xiàn)
總結(jié)
到此這篇關(guān)于uniapp開發(fā)安卓App實(shí)現(xiàn)高德地圖路線規(guī)劃導(dǎo)航的全過程的文章就介紹到這了,更多相關(guān)uniapp高德地圖路線規(guī)劃導(dǎo)航內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
實(shí)現(xiàn)局部遮罩與關(guān)閉原理及代碼
實(shí)現(xiàn)局部遮罩，或許對(duì)某些朋友有著特殊的意義。局部遮罩的原理很簡(jiǎn)單另外加上關(guān)閉就有著另一番的效果,本文將介紹實(shí)現(xiàn)方法，感興趣的朋友可以了解下，或許對(duì)你有所幫助2013-02-02
這篇文章主要介紹了JavaScript阻止瀏覽器返回按鈕的方法,可實(shí)現(xiàn)通過javascript禁用掉返回按鈕的功能,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS執(zhí)行刪除前如何實(shí)現(xiàn)判斷,需要的朋友可以參考下2014-02-02
JSON創(chuàng)建鍵值對(duì)（key是中文或者數(shù)字）方式詳解
這篇文章主要介紹了JSON創(chuàng)建鍵值對(duì)（key是中文或者數(shù)字）方式詳解,需要的朋友可以參考下2017-08-08
JavaScript 消息框效果【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄狫avaScript 消息框效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
javascript基于牛頓迭代法實(shí)現(xiàn)求浮點(diǎn)數(shù)的平方根【遞歸原理】
這篇文章主要介紹了javascript基于牛頓迭代法實(shí)現(xiàn)求浮點(diǎn)數(shù)的平方根,簡(jiǎn)單說明了牛頓迭代法的原理,并結(jié)合實(shí)例分析了javascript基于遞歸的數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
關(guān)于layui toolbar和template的結(jié)合使用方法
今天小編就為大家分享一篇關(guān)于layui toolbar和template的結(jié)合使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了js如何實(shí)現(xiàn)瀏覽器打印功能，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
Web性能優(yōu)化系列 10個(gè)提升JavaScript性能的技巧
Javascript 性能優(yōu)化絕不是一種書面的技術(shù)，Nicholas 的技術(shù)演進(jìn)列出了10條建議，幫助你寫出高效的 JS 代碼2016-09-09
小編之前整理了不少JavaScript常用的正則表達(dá)式實(shí)例，都是自己用的，現(xiàn)在放出來給大家分享下。2014-05-05