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

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

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

技術(shù)概述

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

uniapp的map組件中導(dǎo)航路線(xiàn)的展示。是uniapp開(kāi)發(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)，分開(kāi)描述各個(gè)部分。

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

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

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

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

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

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

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

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

//繪制規(guī)劃路線(xiàn)
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)
		}
	})
}

路線(xiàn)標(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ī)劃路線(xiàn)來(lái)

只要傳入對(duì)應(yīng)的路線(xiàn)途中打點(diǎn)的數(shù)組對(duì)象即可在路線(xiàn)中顯示經(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)
	})
}

效果圖

請(qǐng)?zhí)砑訄D片描述

問(wèn)題與解決

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

問(wèn)題：

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

請(qǐng)?zhí)砑訄D片描述

解決：

我根據(jù)路線(xiàn)的起始點(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)路線(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);
	}
});

請(qǐng)?zhí)砑訄D片描述

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

參考文獻(xiàn)

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

總結(jié)

到此這篇關(guān)于uniapp開(kāi)發(fā)安卓App實(shí)現(xiàn)高德地圖路線(xiàn)規(guī)劃導(dǎo)航的全過(guò)程的文章就介紹到這了,更多相關(guān)uniapp高德地圖路線(xiàn)規(guī)劃導(dǎo)航內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: