uniapp 开发安卓App实现高德地图路线规划导航

我叫小贺啦

已于 2022-06-23 16:10:34 修改

阅读量1.2w

点赞数 3

文章标签： javascript 前端开发语言 vue.js

于 2022-06-23 16:03:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45739290/article/details/125424472

版权

文章目录

技术概述

描述这个技术是做什么的/什么情况下会使用到这个技术，学习该技术的原因，技术的难点在哪里。控制在50-100字内。

uniapp的map组件中导航路线的展示。是uniapp开发app时引入地图导航的实现方式。技术难点在于实现map组件时对于属性以及函数的细节使用很容易出现一些奇怪的bug。

技术详述

描述你是如何实现和使用该技术的，要求配合代码和流程图详细描述。可以再细分多个点，分开描述各个部分。

首先是在地图开发者平台申请地图的key

key在地图开发时引入地图时是必备

在这里插入图片描述

接着在开发工具HbuilderX的插件市场安装插件

在插件市场找到这个路线规划插件，点击进行安装到开发工具中。

在这里插入图片描述

在页面的script中引入js文件

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

以上的js文件有两个函数，分别为绘制路线与路线标记点函数

绘制规划路线函数

//绘制规划路线
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:

最低0.47元/天解锁文章