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

这篇具有很好参考价值的文章主要介绍了uniapp 开发安卓App实现高德地图路线规划导航。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

技术概述

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

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

技术详述

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

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

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

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

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

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

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

  • 在页面的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: parseFloat(poLen[j].split(',')[0]),
							latitude: parseFloat(poLen[j].split(',')[1])
						})
					}
				}
			}
			result({
				points: points,
				color: "#0606ff",
				width: 8
			})
		},
		fail: function(info) {
			fail(info)
		}
	})
}

路线标记点函数

//标记标记点
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)
	//途经点,先将其分隔成为数组
	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里面的两个函数

只要传入起点与终点的经纬度即可在map组件里展示出规划路线来

只要传入对应的路线途中打点的数组对象即可在路线中显示经过的点。

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)
	})
}
  • 效果图

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

问题与解决

技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容,不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。

问题:

  • 导航路线展示后地图页面缩放大小不能很好的控制, 由于展示路线后我们期望地图视角能够涵括这个路线的起始点,这个问题困扰了我很久,解决前,总是在路线规划展示后视野仅仅停留在路线的一小部分。解决后,即可完全展示整个路线的视野。

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

解决:

  • 我根据路线的起始点之间的距离,利用一个拟合函数来处理地图scale的大小,这样就可以调整好地图的缩放大小。

通过请求后端来返回导航的距离,设置一个surface数组来存放标记值,将距离换算成km后去遍历surface数组,当距离大于数组的值时,将地图的scale设置为surface对应下标值+5,这样就可以实现路线展示后地图缩放大小的控制了。

uni.request({
	/* url: 'http://47.95.151.202:8087/getDist/福州大学/福州三坊七巷', */
	url: 'http://47.95.151.202:8087/getDist/'+that.myAddress+'/'+that.realAddress,
	success: (res) => {
		// 请求成功之后将数据给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);
	}
});

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

我的总结

  • 通过此次的地图学习,基本掌握了地图的实现方式,导航路线的展示方法,以及map组件的相关属性和函数的使用,收获颇丰。

参考文献

uniapp 开发安卓App引入高德地图文章来源地址https://www.toymoban.com/news/detail-429636.html

到了这里,关于uniapp 开发安卓App实现高德地图路线规划导航的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue 高德地图(@amap/amap-jsapi-loader)的基本使用:添加标记、POI关键字搜索、路线规划...(方法一)

    具体的步骤可以参考我的上一篇博客,有详细说明如何注册申请高德的Key、秘钥,初始化地图等等 vue-amap : vue-amap 基于 Vue 2.x 与高德的地图组件 高德官方介绍:地图 JS API Web服务API简介 高德Web服务API向开发者提供HTTP接口,开发者可通过这些接口使用各类型的地理数据服务,

    2024年01月18日
    浏览(50)
  • uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】

    先上效果图: 1. 在封装方法的文件夹下新建一个js文件,然后把这些功能进行封装 2.在需要的页面中进行调用 注意点: 1. 拨打电话需要进行app权限配置,设置完成后可以在正式版看到效果。(这几个最好都勾选上) 2. 配置高德地图的app模块设置,这里的appkey需要到高德地图

    2024年02月05日
    浏览(73)
  • 【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 我的项目是uniapp打包成安卓app,这里不会讲解微信小程序之类的踩坑,只记录app端的用法 首先要知道,定位是返回经纬度,地图是渲染页面。这个不能搞混。 在uniapp中有map组件,具体可看官网的文档

    2023年04月16日
    浏览(45)
  • uniapp中打包Andiord app,在真机调试时地图以及定位功能可以正常使用,打包成app后失效问题(高德地图)

    踩坑uniapp中打包Andiord app,在真机调试时地图以及定位功能可以正常使用,打包成app后失效问题_uniapp真机调试高德地图正常 打包apk高德地图就不加载-CSDN博客 目前两个项目,一个项目是从另一个项目里面分割出来的一整套完整的系统,两个项目 配置里面的高德地图的key值都

    2024年01月24日
    浏览(77)
  • Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式

    在 Uniapp 中,可以通过使用 uni-app 统一的 API 来同时兼容 H5、web、App 和微信小程序,而引入高德地图则有以下两种语法格式供选择: 使用 Vue.js 的语法格式: 使用原生 JavaScript 的语法格式: 需要注意的是,这两种语法格式都需要在页面组件的 JavaScript 文件中引入相应的 API 文

    2024年02月05日
    浏览(58)
  • flutter实现调用原生安卓的高德地图导航功能(插件化)

    查看了高德地图flutter插件的文档,都没有能支持导航的功能,并且flutter的高德插件支持的功能特别少,没办法,只能使用安卓原生的导航,flutter去调用了,具体实现方式如下: 创建 Flutter 插件 使用--template=plugin 声明创建的是同时包含了 iOS 和 Android 代码的 plugin; 使用--o

    2024年02月16日
    浏览(51)
  • 高德地图绘制 GPX 数据路线

    重要! 高德地图 js api 文档: https://lbs.amap.com/api/javascript-api-v2/documentation 你所有需要知道的关于 AMap 的所有对象,及其属性、方法、事件都在这里面写明白了。 .gpx 文件是在分享地图路径时最常用的一种数据格式。里面包含了路径点的相关信息,每个点还有可能拥有自己的时

    2024年01月19日
    浏览(44)
  • uniapp开发小程序解析经纬度获取当前位置信息(高德地图三)

    选择了高德地图定位 高德地图官网 小程序步骤如下:      1.首先创建应用       2.点击增添key按钮申请小程序key         3.然后下载它的微信小程序版 SDK:微信小程序 SDK         4.把下载的sdk放在公共的文件里,这里我放在了utils文件目录下          5.使用页面导入此

    2024年02月02日
    浏览(60)
  • 微信小程序实现地图路线规划

    1、获取用户地理位置: 使用 wx.getLocation API 获取用户当前的经纬度坐标。 2、 选择终点位置: 选择你要显示路线的终点经纬度坐标。 3、 使用地图组件: 在小程序页面中使用 map 组件,设置 markers 属性显示起点和终点。 4、 显示路线: 通过 polyline 属性可以显示路线。在上述

    2024年04月11日
    浏览(37)
  • 微信小程序---- 外卖小程序查看实时地图路线(骑手端&用户端)【高德地图】

    前言:1. 在小程序中需要使用map组件,文档链接:https://developers.weixin.qq.com/miniprogram/dev/component/map.html 2.使用的是高德地图,所以需要引进相关的js,下载链接:https://lbs.amap.com/api/wx/download 3.去往高德官方申请需要用的key,操作链接:https://lbs.amap.com/api/wx/guide/create-project/get-key

    2024年02月16日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包