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

文章目录

技术概述
技术详述
问题与解决
我的总结
参考文献

技术概述

描述这个技术是做什么的/什么情况下会使用到这个技术，学习该技术的原因，技术的难点在哪里。控制在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: 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)})
}

效果图

问题与解决

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

问题：

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

解决：

我根据路线的起始点之间的距离，利用一个拟合函数来处理地图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) => {// 请求成功之后将数据给Infovar 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);}
});

我的总结

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

参考文献

uniapp 开发安卓App引入高德地图

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

android app调用第三方地图路线规划导航（百度，高德，腾讯）
android app调用第三方地图路线规划导航(百度,高德,腾讯) 因为直接使用高德的sdk提供的导航被投诉说不准,所以需要接第三方. 把BAT系的地图都接上了,有兄弟找到其他的地图调用方法告诉下小 ...
高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解
前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标 ...
iOS 高德地图路线规划
最近做了高德地图路线规划,把自己不熟的点记录一下: 1.地图不显示当前位置精准圈:设置mapview的 customizeUserLocationAccuracyCircleRepresentatio ...
uniApp开发安卓App调试与打包
总结一下auniapp开发安卓app的调试方式及打包; 代码编程查看文档即可.; 1通过vue-cli方式初始化项目参考地址: https://uniapp.dcloud.io/quickstart ...
uni-app开发安卓APP运行到真机，未检测到手机或模拟器
本文以 EMUI10 手机系统为例(华为.荣耀手机) 问题在开发安卓应用时,因为安卓模拟器性能较差,uni-app官方不推荐使用,所以选择真机运行的方式调试. 上手就踩了一个小坑,在 HBuilde ...
java 高德地图路线规划_公交出行路线规划-出行路线规划-开发指南-Android 地图SDK | 高德地图API...
公交路径规划可以根据起终点和公交换乘的数据,使用 BusRouteOverlay 画出公交路线图层,包括起终点和换乘点.另外也可以自定义起终点和换乘点的图标. 目前支持跨城公交路线规划,提供不同城市之 ...
uniapp开发安卓APP测试实现微信支付（初学者都能轻松get）
前提条件上代码打包运行注意bug!! 这里我们是前后端各一个人测试,这里分享一点前端的代码知识以及我们在测试过程中遇到的bug 前提条件首先我们要去微信开放平台申请微信开放APP的应用包名和应 ...
高德地图路线规划时间_路线准、播报拥堵及时，这次自驾出行高德地图可算是帮了大忙...
在我们日常生活中,自驾已经成为一种很普遍的出行方式,不仅在时间上灵活,特别是一家人出行也比较方便.伴随自驾出行的除了爱车外,一款靠谱的地图导航软件也成为了必不可少的旅行伙伴. 目前比较常用的地图导航软 ...
java 高德地图路线规划_高德地图 web 页面里的出行路线规划
高德地图的引入,有两种方式,第一种在引入链接里直接添加 plugin 参数: 第二种是引入链接里不添加 plugin 参数,而是在在使用插件之前,使用AMap.service方法加载插件,然后在回调 ...

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

文章目录

技术概述

技术详述

问题与解决

我的总结

参考文献

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

最新文章

热门文章