uniapp 实时定位（高德、后台运行、支持息屏、坐标转换、距离计算） Ba-LocationAMap

已于 2023-02-23 16:20:05 修改
阅读量6.2k 收藏 32
点赞数 2
分类专栏： uni-app 文章标签： uni-app 定位 原生插件 后台定位 实时定位
于 2023-02-21 21:35:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013164293/article/details/129115296
版权

简介（下载地址）

Ba-LocationAMap 是一款uniapp定位插件（高德）。支持实时定位、后台运行、息屏运行等；支持逆地理地址信息；支持坐标转换；支持坐标转换；支持距离计算；支持电池优化白名单。

本插件自带简单保活，如果需要进一步保活，请使用 Ba-KeepAlive。

  • 支持设置位置信息更新周期
  • 支持设置定位模式：高精度、低功耗、仅设备
  • 支持设置单次定位、持续定位
  • 支持设置开启、关闭后台定位
  • 支持获取定位开关是否打开
  • 支持跳转到定位服务设置界面
  • 支持返回逆地理地址信息
  • 支持坐标转换
  • 支持两点间距离计算
  • 支持电池优化白名单

截图展示

在这里插入图片描述

使用方法

申请并配置高德appkey

在高德开放平台，申请高德appkey。

在 manifest.json 中，配置申请的appkey，如下图：
在这里插入图片描述

引入组件

在 script 中引入组件

	const location = uni.requireNativePlugin('Ba-LocationAMap')
调用

在 script 中调用（示例参考，可根据自己业务和调用方法自行修改）

	const location = uni.requireNativePlugin('Ba-LocationAMap')
	export default {
		data() {
			return {
				msgList: [],
				locationMode: '0',
				interval: '2000',
				onceLocation: false,
				needAddress: true
			}
		},
		onLoad() {
		},
		methods: {
			startL() { //开启定位
				location.start(
					res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					}, {
						locationMode: this.locationMode,
						interval: this.interval,
						onceLocation: this.onceLocation,
						needAddress: this.needAddress
					});
			},
			stopL() { //关闭定位
				location.stop(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					})
				});
			},
			isStartLocation() { //是否开启定位
				location.isStartLocation(res => {
					console.log(res);
					if (res.data) {
						this.msgList.unshift(JSON.stringify(res.data))
						this.msgList.unshift(dateUtil.now())
					}
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					})
				});
			},
			enableBackground() { //开启后台定位
				location.enableBackground(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					})
				});
			},
			disableBackground() { //关闭后台定位
				location.disableBackground(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					})
				});
			},
			isEnableBackground() { //是否开启后台定位
				location.isEnableBackground(res => {
					console.log(res);
					if (res.data) {
						this.msgList.unshift(JSON.stringify(res.data))
						this.msgList.unshift(dateUtil.now())
					}
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					})
				});
			},
			convertPoint() { //转换坐标
				location.convertPoint({
					coordType: 1,
					longitude: 114.501575,
					latitude: 38.05544
				}, res => {
					console.log(res);
					if (res.data) {
						this.msgList.unshift(JSON.stringify(res.data))
						this.msgList.unshift(dateUtil.now())
					}
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					})
				});
			},
			calculateLineDistance() { //两点间距离计算
				location.calculateLineDistance({
					longitude1: 114.501575,
					latitude1: 38.05544,
					longitude2: 114.501182,
					latitude2: 38.056119
				}, res => {
					console.log(res);
					if (res.data) {
						this.msgList.unshift(JSON.stringify(res.data))
						this.msgList.unshift(dateUtil.now())
					}
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					})
				});
			},
			isLocationEnable() { //定位开关是否打开
				location.isLocationEnable(
					res => {
						console.log(res);
						if (res.data) {
							this.msgList.unshift(JSON.stringify(res.data))
							this.msgList.unshift(dateUtil.now())
						}
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			goSetting() { //跳转到定位服务设置界面
				location.goSetting(
					res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			requestIgnoreBattery() { //申请加入电池优化白名单
				location.requestIgnoreBattery(
					res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			isIgnoringBattery() { //是否加入电池优化白名单
				location.isIgnoringBattery(
					res => {
						console.log(res);
						if (res.data) {
							this.msgList.unshift(JSON.stringify(res.data))
							this.msgList.unshift(dateUtil.now())
						}
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
		}
	}

定位信息监听

在应用生命周期App.vue的onLaunch事件中设置监听：

        onLaunch: function() {
			var globalEvent = uni.requireNativePlugin('globalEvent');
			globalEvent.addEventListener('baLocationAMapEvent', function(e) {
				console.log('baLocationAMapEvent：' + JSON.stringify(e));
				//这里写你的逻辑，定位信息参数如下
			});
		},
		onShow: function() {
		},
		onHide: function() {
		}
定位信息参数
属性名类型说明
longitudeNumber经度
latitudeNumber纬度
timeNumber时间
speedNumber速度
altitudeNumber海拔，单位 m
bearingNumber方位
accuracyNumber位置的精确度
locationTypeString定位类型
addressString地址

api 列表

方法名说明
start开启定位服务
stop停止定位服务
isStartLocation是否开启定位
enableBackground开启后台定位
disableBackground关闭后台定位
isEnableBackground是否开启后台定位
convertPoint转换坐标
calculateLineDistance两点间距离计算
isLocationEnable定位开关是否打开
goSetting跳转到定位服务设置界面
requestIgnoreBattery申请加入电池优化白名单
isIgnoringBattery是否加入电池优化白名单

start 方法参数

开启定位服务

属性名类型必填默认值说明
locationModeNumberfalse0定位模式：默认为高精度模式，0 高精度，1 为低功耗模式，2 是仅设备模式
intervalNumberfalse2000定位间隔：单位毫秒，默认为2000
onceLocationBooleanfalsefalse是否单次定位。默认是false
httpTimeOutNumberfalse30000网络请求超时时间。默认为30秒。在仅设备模式下无效
locationCacheEnableBooleanfalsetrue是否使用缓存定位，默认为true
needAddressBooleanfalsetrue是否返回逆地理地址信息。默认是true
isEnableBackgroundBooleanfalsefalse是否开启后台定位，默认不开启

convertPoint 方法参数

转换坐标

属性名类型必填默认值说明
longitudeNumbertrue经度
latitudeNumbertrue纬度
coordTypeNumberfalse1坐标来源：1:百度 2:图吧 3:图盟 4:搜搜 5:阿里云 6:谷歌 7:GPS
返回

{“longitude”:114.49514,“latitude”:38.04919}

calculateLineDistance 方法参数

两点间距离计算

属性名类型必填默认值说明
longitude1Numbertrue经度1
latitude1Numbertrue纬度1
longitude2Numbertrue经度2
latitude2Numbertrue纬度2
返回

{“distance”:82.885}

系列插件

图片选择插件 Ba-MediaPicker （文档）

图片编辑插件 Ba-ImageEditor （文档）

文件选择插件 Ba-FilePicker （文档）

应用消息通知插件（多种样式，新增支持常驻通知模式） Ba-Notify（文档）

应用未读角标插件 Ba-Shortcut-Badge （文档）

应用开机自启插件 Ba-Autoboot（文档）

扫码原生插件（毫秒级、支持多码）Ba-Scanner-G（文档）

扫码原生插件 - 新（可任意自定义界面版本；支持连续扫码；支持设置扫码格式）Ba-Scanner（文档）

动态修改状态栏、导航栏背景色、字体颜色插件 Ba-AppBar（文档）

原生sqlite本地数据库管理 Ba-Sqlite（文档）

安卓保活插件（采用多种主流技术） Ba-KeepAlive（文档）

安卓快捷方式（桌面长按app图标） Ba-Shortcut（文档）

自定义图片水印（任意位置） Ba-Watermark（文档）

最接近微信的图片压缩插件 Ba-ImageCompressor（文档）

视频压缩、视频剪辑插件 Ba-VideoCompressor（文档）

动态切换应用图标、名称（如新年、国庆等） Ba-ChangeIcon（文档）

原生Toast弹窗提示（穿透所有界面、穿透原生；自定义颜色、图标 ） Ba-Toast（文档）

图片涂鸦、画笔 Ba-ImagePaint（文档）

pdf阅读（手势缩放、显示页数） Ba-Pdf（文档）

声音提示、震动提示、语音播报 Ba-Beep（文档）

websocket原生服务（自动重连、心跳检测） Ba-Websocket（文档）

短信监听（验证码） Ba-Sms（文档）

智能安装（自动升级） Ba-SmartUpgrade（文档）

监听系统广播、自定义广播 Ba-Broadcast（文档）

监听通知栏消息（支持白名单、黑名单、过滤） Ba-NotifyListener（文档）

全局置灰、哀悼置灰（可动态、同时支持nvue、vue） Ba-Gray（文档）

获取设备唯一标识（OAID、AAID、IMEI等） Ba-IdCode（文档）

实时定位（系统、后台运行、支持息屏）插件 Ba-Location（文档）

实时定位（高德、后台运行、支持息屏、坐标转换、距离计算） Ba-LocationAMap（文档）

窗口小工具、桌面小部件、微件 Ba-AppWidget（文档）

窗口小工具、桌面小部件、微件（日历、时间） Ba-AwCalendarS（文档）

画中画悬浮窗（视频） Ba-VideoPip（文档）

悬浮窗（在其他应用上层显示） Ba-FloatWindow（文档）

悬浮窗（应用内、无需授权） Ba-FloatWindow2（文档）

悬浮窗（悬浮球、动态菜单、在其他应用上层显示） Ba-FloatBall（文档）

三杯五岳
关注
  • 2
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用java、js或mysql计算高德地图中两坐标之间的距离
10-19
首先，你需要创建一个具有GIS类型（如`POINT`）的列，然后可以使用`ST_Distance_Sphere`函数来计算距离。以下是一个例子： ```sql CREATE TABLE locations ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50...
高德腾讯百度坐标转换。
03-20
高德腾讯百度坐标转换。
uni-app 支持多端第三方地图定位的方法
10-15
主要介绍了uni-app 支持多端第三方地图定位的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用uniapp开发app实现后台保活定位能力
最新发布
qq_40358970的博客
06-11 847
在 UniApp 中实现后台保活定位能力通常涉及几个关键步骤，包括获取定位权限、实现定位功能、处理后台定位以及确保应用在后台时能够持续定位。
uniapp 之定位当前位置 （uni.getLocation，腾讯地图，javascript）
weixin_42489478的博客
04-21 2万+
下面的操作如果你是vue的就直接引入到index.html文件中。 如果是uni-app就比较麻烦了： 1.首先新建一个template.h5.html文件； 2.在manifest.json -> 源码视图 -> h5 -> 添加 “template” : “template.h5.html” 在创建文件中引入： <iframe id="geoPage" width=0 ...
uni-app如何获取位置信息(经纬度)
热门推荐
daishu_shu的博客
07-12 2万+
在实际项目中很多时候我们需要获取设备的位置信息，去展示给客户，或者以位置信息为参数，继续向服务器获取一些数据。接下来以uni-app小程序项目为例来介绍获取位置信息的思路 判断小程序是否授权位置信息 （代码在上方）定位获取 通过经纬度坐标获取区域码 二、相关的数据返回 提示：这里对文章进行总结： 以上就是获取位置信息的大概步骤思路：......
uniapp中地图定位功能实现的几种方案
q_qman的博客
11-04 2927
缺点：关闭定位后延时很久，无法控制定位延迟时间，流程卡顿。获取手机定位权限方法不支持h5。实现思路：uni.getLocation获取经纬度后调用接口获取城市名。3.浏览器内置对象navigator.geolocation。缺点：仅支持https协议链接，http协议下无法正常定位。1.uniapp自带uni.getLocation。缺点：dom拼接百度map降低性能，初始化时慢3秒。优点：比较稳健，功能支持群面。优点：方便快捷，直接调用。
持续定位uniapp接口文档
liaoliao520的博客
02-18 1808
基于高德定位和猎鹰原生SDK封装的双端Uniapp原生插件，主要包括持续定位、地理围栏、猎鹰轨迹等功能，兼容Uniapp的高德地图和定位模块。
uniapp实现微信小程序用户实时位置定位并显示地图
m0_58991732的博客
02-06 1万+
目前，我们可以通过一些现成的api来实现此功能。下面我将介绍一下通过腾讯位置服务来实现此功能的具体操作流程。需将以上代码中的key，换成自己刚刚配置的key。进入到manifest.json文件中。
Android中GPS坐标转换为高德地图坐标详解
01-05
 3、其他特殊坐标体系，一般都是由火星坐标通过偏移算法计算得出的，比如百度使用的是BD-09坐标，搜狗使用的是自己的搜狗坐标。 二、坐标转换 1、使用高德地图sdk转换 public AMapLocation fromGpsToAmap...
C# 高德地图百度地图计算两点坐标距离
09-30
C# 高德地图百度地图计算两点坐标距离，返回两点之间的距离
高德、百度坐标系转天地图坐标系
06-06
本篇文章将详细阐述高德、百度坐标系与天地图坐标系之间的转换方法，并探讨这种转换的重要性。 首先，我们要理解坐标系的基本概念。在地理信息系统中，坐标系是用于定义地球上任何位置的数学框架。常见的全球坐标系...
uniapp实现移动App地图定位
章小鱼的博客
07-05 2539
在uni-app中，你可以使用uni-app-baidu-map插件或者uni-app-amap插件来实现App地图定位。这两个插件分别基于百度地图API和高德地图API，提供了丰富的地图功能和相关API。
UniApp 实现获取地图定位
qq_35309973的博客
02-23 1740
通过以上步骤，你可以在 UniApp 中实现基本的地图定位功能。当然，实际开发中可能还会涉及更多的细节和优化，比如使用地图标记、路径规划等功能。但希望本文能为你提供一个清晰的入门指引，让你能够快速上手 UniApp 的定位功能。记得测试不同的设备和环境，以确保最佳的用户体验。
uniapp开发小程序获取定位信息（腾讯地图）
weixin_62639453的博客
02-06 5285
定位一直是一个让人头疼的问题，不是这个有问题就是那里有问题。这里结合我多方查找和实际运行，获得的一些经验给予分享。
uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
qq_40007317的博客
10-20 5405
uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)
weixin_44805839的博客
07-28 4010
本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件
uniapp使用高德实时定位
06-09
在Uniapp中使用高德地图实时定位，需要先在HBuilderX中安装高德地图插件，具体步骤如下： 1. 在HBuilderX中打开插件市场，搜索“高德地图”并安装。 2. 安装完成后，在项目根目录下的manifest.json文件中添加高德地图插件的AppKey： ``` "amap": { "android": { "apiKey": "your_app_key_here" }, "ios": { "apiKey": "your_app_key_here" } } ``` 3. 在页面中引入高德地图插件： ``` <template> <view> <map :show-location="true" :include-points="markers" style="width: 100%; height: 100%;"></map> </view> </template> <script> import map from '@/uni_modules/amap/components/amap.vue' export default { components: { map }, data() { return { markers: [] } }, onReady() { this.startLocation() }, methods: { startLocation() { uni.getLocation({ type: 'gcj02', success: (res) => { this.markers.push({ latitude: res.latitude, longitude: res.longitude, iconPath: '/static/marker.png', width: 32, height: 32 }) } }) } } } </script> ``` 通过调用uni.getLocation()方法获取用户当前位置，并在地图上显示出来。需要注意的是，如果需要实时更新地图上的位置信息，可以使用setInterval()方法定时调用getLocation()方法更新地图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值