uniapp開發(fā)安卓App實現(xiàn)高德地圖路線規(guī)劃導航功能的全過程

更新時間：2022年08月11日 10:10:21 作者：我叫小賀啦

最近項目需要在APP內實現(xiàn)路線規(guī)劃導航功能,直接打開高德地圖進行導航,下面這篇文章主要給大家介紹了關于利用uniapp開發(fā)安卓App實現(xiàn)高德地圖路線規(guī)劃導航功能的相關資料,需要的朋友可以參考下

技術概述

描述這個技術是做什么的/什么情況下會使用到這個技術，學習該技術的原因，技術的難點在哪里?？刂圃?0-100字內。

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

技術詳述

描述你是如何實現(xiàn)和使用該技術的，要求配合代碼和流程圖詳細描述?？梢栽偌毞侄鄠€點，分開描述各個部分。

首先是在地圖開發(fā)者平臺申請地圖的key

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

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

在插件市場找到這個路線規(guī)劃插件，點擊進行安裝到開發(fā)工具中。

在頁面的script中引入js文件

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

以上的js文件有兩個函數(shù)，分別為繪制路線與路線標記點函數(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)
		}
	})
}

路線標記點函數(shù)

//標記標記點
function Makemarkers(startpoi, endpoi, waypoints, success) {
	let markers = [];
	//起點
	let start = {
		iconPath: "@/static/img/log/nav.png",
		id: 0,
		longitude: startpoi.split(",")[0],
		latitude: startpoi.split(",")[1],
		width: 23,
		height: 33,
		callout:{
			content:'起點',
		}
	}
	markers.push(start)
	//終點
	let end = {
		iconPath: "@/static/img/log/nav.png",
		id: 1,
		longitude: endpoi.split(",")[0],
		latitude: endpoi.split(",")[1],
		width: 23,
		height: 33,
		callout:{
			content:'終點',
		}
	}
	markers.push(end)
	//途經點,先將其分隔成為數(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:'途徑點',
			}
		}
		markers.push(point)
	}
	success(markers);
}

接著在script里的showRouter()調用js里面的兩個函數(shù)

只要傳入起點與終點的經緯度即可在map組件里展示出規(guī)劃路線來

只要傳入對應的路線途中打點的數(shù)組對象即可在路線中顯示經過的點。

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)
	})
}

效果圖

請?zhí)砑訄D片描述

問題與解決

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

問題：

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

請?zhí)砑訄D片描述

解決：

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

通過請求后端來返回導航的距離，設置一個surface數(shù)組來存放標記值，將距離換算成km后去遍歷surface數(shù)組，當距離大于數(shù)組的值時，將地圖的scale設置為surface對應下標值+5，這樣就可以實現(xiàn)路線展示后地圖縮放大小的控制了。

uni.request({
	/* url: 'http://47.95.151.202:8087/getDist/福州大學/福州三坊七巷', */
	url: 'http://47.95.151.202:8087/getDist/'+that.myAddress+'/'+that.realAddress,
	success: (res) => {
		// 請求成功之后將數(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: '獲取距離錯誤，換個地點試試唄',
				icon: 'none',
			});
		}
	},
	fail(err) {
		res(err);
	}
});

請?zhí)砑訄D片描述