个人技术总结——uniapp地图实时定位及路径显示

222000133杨月婷 2023-06-07 17:20:52
这个作业属于哪个课程软件工程-23年春季学期软件工程
这个作业要求在哪里软件工程实践总结&个人技术总结
这个作业的目标个人技术总结
其他参考文献见文末

目录

  • 一、技术概述
  • 二、技术详述
  • 三、问题及解决
  • 四、技术总结
  • 五、参考文献

一、技术概述

  uniapp通过map组件,以及用户授权的位置信息,使得在地图上实时显示用户的位置以及对应路径信息的展示,用于实现团队项目中运动模块的功能。技术难点在于定时获得用户位置信息以及运动定位的准确性。

二、技术详述

1、获取第三方SDK(高德)

  首先进入高德开放平台注册账号后点击右上角控制台,点击创建新应用,填写相关信息后点击新建按钮。

在这里插入图片描述

  创建完成后为新创建的应用添加Key,填写相关的信息后进行提交。

在这里插入图片描述

  获得Key后分别填入uniapp项目下manifest.json下APP模块配置中Geolocation(定位)Maps(地图)的对应位置。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2、用户位置信息授权及系统定位功能打开

  首先在manifest.json的APP权限配置中打开用户位置信息权限请求。

在这里插入图片描述

  通过uni.getSystemInfoSync()获得系统信息,判断用户设备定位功能是否开启,若未开启则跳转到相应的打开系统设置GPS服务页面。

在这里插入图片描述

3、地图组件map的使用

  map使用到的相关属性:

属性类型默认值说明
longitudeNumber中心经度
latitudeNumber中心纬度
scaleNumber16缩放级别,取值范围为3-20
markersArray标记点
polylineArray通过众多点的连线形成路径
longitudeNumber中心经度
show-locationBoolean显示带有方向的当前定位点

在这里插入图片描述


在这里插入图片描述

  需注意的点: 组件的宽/高推荐写直接量,比如:800px,上方高度采用直接量写法,宽度由于各设备宽度差距大故直接用百分比。

4、实时位置信息的获得及显示

  polyline使用到的相关属性:

属性说明类型备注
points经纬度数组Array[{latitude: 0, longitude: 0}]
color线的颜色String8位十六进制表示,后两位表示alpha值,如:#0000AA
width线的宽度Number
arrowLine带箭头的线Boolean默认false
dottedLine是否虚线Boolean默认false

在这里插入图片描述

  markers使用到的相关属性:

属性说明类型备注
id标记点idNumber必填,marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。最大限制9位数
latitude纬度Number浮点数,范围-90~90
longitude经度Number浮点数,范围-180~180
iconPath显示的图标String项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径

在这里插入图片描述

  通过计时函数setInterval()每隔1000ms调用uni.getLocation()获得用户当前的定位并加入到polyline中,以此形成路线图。

在这里插入图片描述


在这里插入图片描述

  最后显示时,可以直接将polyline的起始点以及终止点作为运动起始点结束点,并用markers进行标记,并设置自己的图标。

在这里插入图片描述

5、效果展示

app请求用户位置授权用户设备GPS定位开启地图、路线及标记点展示

属性

说明

在这里插入图片描述

三、问题及解决

问题: map属于原生组件,层级过高,导致其他内容会被map组件覆盖,一开始尝试使用<cover-view><cover-image>进行其他内容的编写,但这两者样式会受到限制,最终效果无法达到预期,效果较差。
解决: uniapp中map组件的注意事项中(如下图)讲到另一种方法,使用原生子窗体subNVue绘制原生内容,subNVue是原生渲染的nvue子窗体,把一个nvue页面以半屏的方式覆盖在vue页面上,提供了强大的层级问题解决方案。

在这里插入图片描述

步骤:

  1、在需要显示subNVue的界面进行相关的配置

在这里插入图片描述

  2、通过uni.$emit()将信息传送到subNVue界面,通过uni.getSubNVueById()获取子窗体,最后通过show()打开子窗体并展示。

在这里插入图片描述

  3、nvue界面通过uni.$on()获得从引用界面传入的数据。

在这里插入图片描述

四、技术总结

  是一个不断发现困难解决困难的过程吧,在运动模块这一部分的代码编写时,经历了无数次的返工,样式的挑战每种方法都与实际有所偏差,但也正是在不断尝试的过程中逐渐掌握最好的解决方法,也算是拨开云雾见青天了。map组件确实提供了一个比较好的集合,但也确实还存在许多问题,如何找到一种更好的方法也是需要不断探索的。

五、参考文献

1、高德地图SDK获取key
2、uniapp内置组件map的使用
3、uni-app subNVue 原生子窗体开发指南

...全文
3323 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

587

社区成员

发帖
与我相关
我的任务
社区描述
软件工程-2022-23学年(第二学期)
软件工程 高校
社区管理员
  • LinQF39
  • chennuo.
  • 异梦1
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧