想要在UniApp中实现获取手机定位功能，我们可以通过uni.getLocation的API来获取设备的地理位置信息，如下所示。
获取手机定位
在使用定位功能之前，我们首先要保证开启了获取定位的权限，可以在manifest.json文件中添加相关的配置内容，如下所示。
// manifest.json
{
"permissions": {
"Location": {
"description": "需要获取您的地理位置"
}
}
}接下来我们就可以在页面中通过点击按钮来获取到地理位置信息，如下所示。
<template>
<view class="container">
<button @click="getLocation">获取定位</button>
<view v-if="location">
<text>纬度：{{ location.latitude }}</text>
<text>经度：{{ location.longitude }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
location: null
};
},
methods: {
getLocation() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
this.location = {
latitude: res.latitude,
longitude: res.longitude
};
},
fail: (err) => {
uni.showToast({
title: '获取定位失败',
icon: 'none'
});
console.error(err);
}
});
}
}
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
margin-bottom: 20px;
}
text {
margin: 10px 0;
}
</style>
在上面的代码中，当我们点击了获取位置的按钮的时候，应用就会获取到当前移动设备所处的地理位置信息，并且在获取正确的经纬度之后进行展示，如果获取失败也会提示一个获取失败的信息。
这里需要注意，在不同的平台上，获取地理位置的权限配置可能有所不同，所以在进行上述操作之前，我们需要确保已经能够正确的获取到用户权限。还有一部分的开发者平台需要在开发者中心或者是相关的配置中添加其他的配置才能请求地理位置信息。
那么上面是通过点击事件来获取定位信息，有没有一种方式可以持续获取用户地理位置信息，类似于应用程序在后台运行也可以获取到手机位置信息。
后台获取手机位置信息
在UniApp中如果你希望在应用程序运行过程中也能正常的获取到位置信息，我们可能需要进行如下的一些配置操作。
- 对于 Android，需要在 manifest.json 中添加后台定位权限。
- 对于 iOS，需要在 manifest.json 中配置后台定位权限，并在应用的 Info.plist 中添加描述。
- 通过定时器在应用处于后台时定期获取定位信息
与上面的操作一样，需要配置相关的权限，如下所示。
{
"permissions": {
"Location": {
"description": "需要获取您的地理位置"
},
"BackgroundLocation": {
"description": "需要在后台获取您的地理位置"
}
},
"android": {
"manifest": {
"uses-permission": [
{
"name": "android.permission.ACCESS_BACKGROUND_LOCATION"
}
]
}
},
"ios": {
"NSLocationAlwaysUsageDescription": "需要在后台获取您的地理位置",
"NSLocationAlwaysAndWhenInUseUsageDescription": "需要在后台获取您的地理位置",
"UIBackgroundModes": ["location"]
}
}
接下来我们可以通过定时器或者是其他的保持机制在后台持续的获取到用户位置信息如下所示。
<template>
<view class="container">
<button @click="startBackgroundLocation">开始后台定位</button>
<view v-if="location">
<text>纬度：{{ location.latitude }}</text>
<text>经度：{{ location.longitude }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
location: null,
timer: null
};
},
methods: {
startBackgroundLocation() {
// 确保在前台获得定位权限
uni.getLocation({
type: 'wgs84',
success: (res) => {
this.updateLocation(res);
// 设置定时器，每隔一段时间获取一次定位
this.timer = setInterval(this.getLocationInBackground, 60000); // 每分钟获取一次
// 挂载到应用实例，确保在页面关闭时能清除定时器
getApp().globalData.backgroundTimer = this.timer;
},
fail: (err) => {
uni.showToast({
title: '获取定位失败',
icon: 'none'
});
console.error(err);
}
});
},
getLocationInBackground() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
this.updateLocation(res);
},
fail: (err) => {
console.error(err);
}
});
},
updateLocation(location) {
this.location = {
latitude: location.latitude,
longitude: location.longitude
};
console.log('Location updated:', this.location);
}
},
beforeDestroy() {
// 页面销毁前清除定时器
clearInterval(this.timer);
}
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
margin-bottom: 20px;
}
text {
margin: 10px 0;
}
</style>
这里需要注意，对于Android如果要获取到后台运行权限，那么可能需要用户手动进行授权同意获取位置信息，对于IOS用户来讲，也要在用户中心进行相应的配置才能获取到用户位置信息。
注意
另外后台获取定位信息其实算的上是一个非常耗电的操作，所以这个需求在实现的时候需要慎用，在使用后台获取用户信息的操作过程中一定要确保用户同意授权给应用使用相关权限，避免涉及用户隐私问题。还有一点需要注意就是对于设备兼容性，可能对于上面的操作对于某些设备来讲无法保证能够正常的运行操作。
