@rattan/location

文档说明

1、在 package.json 文件中添加导入文件

"dependencies": {
		"@rattan/location":"1.0.2",
		},
		

2、代码示例

<template>
	<view class="page-content">

		<view style="padding-top: 200rpx;">
		</view>
		<view style="margin: 20rpx;padding: 10rpx;background: #FFFFFF;">
			<view style="padding: 20rpx;color: 666666;">
				<view style="color: #000000;">
					1、当前经纬度:
				</view>
				<view style="margin-left: 20rpx;">
					经度:{{cData.curPos.lon}}
				</view>
				<view style="margin-left: 20rpx;">
					纬度:{{cData.curPos.lat}}
				</view>
				<view style="padding: 20rpx;color: #000000;">
					2、目的地经纬度:
				</view>
				<view style="margin-left: 20rpx;">
					经度:{{cData.desPos.lon}}
				</view>
				<view style="margin-left: 20rpx;">
					纬度:{{cData.desPos.lat}}
				</view>
			</view>

			<view style="padding: 20rpx;color: 666666;">
				<view style="color: #000000;">
					3、设定{{cData.rangeMeter}}米属于范围区间内：
				</view>
				<view style="margin-left: 20rpx;">
					距离目的地：{{cData.curDis}}米
				</view>
				<view style="margin-left: 20rpx;">
					{{cInRangeStr}}
				</view>
			</view>


			<view style="padding: 20rpx;">
				<view v-if="cNOLocationTips.length > 0" style="color: #000000;">
					4、未权限提示：
				</view>
				<view v-for="(item,index) in cNOLocationTips" :key="index">
					<view class="auth-tips" style="margin-left: 20rpx;">
						{{item}}
					</view>
				</view>
			</view>

		</view>

	</view>

</template>

<script>
	import func from "@rattan/location/func.js"
	import zmLoc from "@rattan/location/index.js"
	export default {
		components: {

		},
		data() {
			return {
				cData: { // 自定义判断字段
					curPos: { // 当前经纬度定位
						lat: 24.46667,
						lon: 118.184761,
					},
					desPos: { // 目的地经纬度
						lat: 24.490107,
						lon: 118.184861,
					},
					curDis: 10000, //与目标距离	单位:米
					rangeMeter: 1000, //范围区间，单位:米
					isInRange: false, //是否在打卡范围内

					// ------ 定位启闭状态 ------
					isLocationMobileSystem: true, // 手机系统
					isLocationWechatApp: true, // 微信app，如果手机系统定位关闭，那么微信app定位也是关闭状态
					isLocationByMiniProgram: true, // 微信小程序
				},
			}
		},

		computed: {
			// 定位没有打开提示文案
			cNOLocationTips() {
				let _arr = []
				if (this.cData.isLocationMobileSystem == false) {
					_arr.push("* 请打开手机和微信应用定位服务")
				} else if (this.cData.isLocationMobileSystem == true &&
					this.cData.isLocationWechatApp == false) {
					_arr.push("* 请打开微信应用定位服务")
				}
				if (this.cData.isLocationByMiniProgram == false) {
					_arr.push(
						"* 请打开小程序定位服务，点击右上角···，点击设置"
					)
				}
				return _arr
			},

			// 是否进入区间范围提示
			cInRangeStr() {
				return this.cData.isInRange ? "已进入范围区间" : "未进入范围区间";
			},
		},

		onLoad(options) {
			this.addMonitor()
		},
		onUnload(options) {
			this.removeMonitor()
		},

		onShow(options) {
			this.openPosition();
		},

		onHide(options) {
			this.closePosition();
		},

		methods: {
			// 开启定位
			openPosition() {
				const systemInfo = uni.getSystemInfoSync()
				// 模拟器没有这两个字段，设置默认打开
				if (systemInfo.locationEnabled != undefined &&
					systemInfo.locationAuthorized != undefined) {
					// 手机系统定位开关
					this.cData.isLocationMobileSystem = systemInfo.locationEnabled;
					// 微信app定位开关，如果手机系统定位关闭，那么微信app定位也会一起关闭
					this.cData.isLocationWechatApp = systemInfo.locationAuthorized
					console.log("手机系统定位开关:", this.cData.isLocationMobileSystem)
					console.log("微信应用定位开关:", this.cData.isLocationWechatApp)
				}
				zmLoc.zmStartMonitor()
			},

			// 关闭定位
			closePosition() {
				zmLoc.zmEndMonitor();
			},


			// 添加监听
			addMonitor() {
				let that = this;
				// 定位监听 - 成功回调
				uni.$on('iAuthorityOpen', (res) => {
					console.log("小程序定位开关:", res)
					if (that.cData.isLocationByMiniProgram != res) {
						that.cData.isLocationByMiniProgram = res;
					}
				})
				// 定位监听 - 成功回调
				uni.$on('iLocationSuc', (res) => {
					console.log('iLocationSuc:', JSON.stringify(res))
					if (!that.$u.test.isEmpty(res)) {
						that.cData.curPos = {
							lat: res?.latitude,
							lon: res?.longitude,
						}
					}

					if (!that.$u.test.isEmpty(that.cData.desPos) &&
						!that.$u.test.isEmpty(that.cData.curPos)) {
						that.checkDistanceAndRange()
					} else {
						console.log("======没有返回经纬度对象")
						that.cData.isInRange = false;
					}
				})

				// 定位监听 - 失败回调
				uni.$on('iLocationErr', (e) => {
					console.log("iLocationErr_e:", JSON.stringify(e));
				})
			},

			// 移除监听
			removeMonitor() {
				zmLoc.zmEndMonitor();
				// 结束定位监听
				uni.$off('iAuthorityOpen');
				uni.$off('iLocationSuc');
				uni.$off('iLocationErr');
			},


			// 计算距离和是否在打卡区间
			checkDistanceAndRange() {
				// 单位：米
				this.cData.curDis = (func.zmCalcuDistance(
					this.cData.curPos.lat,
					this.cData.curPos.lon,
					this.cData.desPos.lat,
					this.cData.desPos.lon) * 1000).toFixed(1)

				console.log("curDis：", this.cData.curPos.lat, "，", this.cData.curPos.lon)
				console.log("desDis：", this.cData.desPos.lat, "，", this.cData.desPos.lon)
				console.log("距离：", JSON.stringify(this.cData.curDis), "米")
				this.cData.isInRange = this.cData.curDis <= this.cData.rangeMeter ? true : false;
			},

		},
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		height: 100%;
		background: #F5F9FC;

		.auth-tips {
			padding-bottom: 12rpx;
			width: 100%;
			text-align: left;
			font-size: 24rpx;
			color: #FF0000;
		}
	}
</style>