个人技术总结——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使用到的相关属性：

属性	类型	默认值	说明
longitude	Number		中心经度
latitude	Number		中心纬度
scale	Number	16	缩放级别，取值范围为3-20
markers	Array		标记点
polyline	Array		通过众多点的连线形成路径
longitude	Number		中心经度
show-location	Boolean		显示带有方向的当前定位点

在这里插入图片描述

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

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

polyline使用到的相关属性：

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

在这里插入图片描述

markers使用到的相关属性：

属性	说明	类型	备注
id	标记点id	Number	必填，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组件确实提供了一个比较好的集合，但也确实还存在许多问题，如何找到一种更好的方法也是需要不断探索的。