uni-app实现定位功能

杭州共生网络 2023-2-5 13:22 7318人围观定位

微信小法式 定位

获得定位信息
间接利用uni-APP自带的getLocation方式，获得当前位置的经纬度：

2. 获得权限
利用uni-app自带的authorize方式，向用户倡议地理位置授权请求。在操纵前要先设置对应的权限数据。
翻开uni-app项目标设置文件manifest.json，点击"源码视图"。

在mp-weixin设置工具里增加红框代码。

"permission" : {
"scope.userLocation" : {
"desc" : "利用定位功用"
}
},
"requiredPrivateInfos": ["getLocation"]

将项目运转至微信开辟者工具上，翻开项目里的设置文件app.json。

在设置工具里增加红框代码。

"permission": {
"scope.userLocation": {
"desc": "利用定位功用"
}
},
"requiredPrivateInfos": [
"getLocation"
],

接着在authorize方式的scope参数上填写scope.userLocation，暗示需要获得地理位置。
假如用户拒绝授权，则询问用户能否打卡小法式设备页面。

3. 获得设备信息
为了利用的松散性，我们应当在利用时先判定当前状态能否有获得地理位置权限，假如没有再向用户申请授权。

4. 获得精准定位
这里以腾讯舆图为例，需要用到高德舆图间接参考官方文档。
4.1 在腾讯舆图网站申请开辟者，建立利用获得key，并下载对应的SDK文件qqmap-wx-jssdk.min.js。
4.2 翻开SDK文件qqmap-wx-jssdk.min.js，在文件末端位置停止替换。

// 本来
module.exports = QQMapWX;
// 变动成
export default QQMapWX;

4.3 建立libs文件夹，放入SDK文件。
4.4 建立腾讯舆图工具

import QQMapWX from "@/libs/qqmap-wx-jssdk.min";
const tMap = new QQMapWX({
key: "00000-11111-22222-33333-44444-55555"
});

4.5 挪用腾讯舆图逆地址剖析方式，获得位置信息

uni.getLocation({
type: 'gcj02',
success: res => {
tMap.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(res) {
let result = {
latitude: res.result.location.lat,
longitude: res.result.location.lng,
location: res.result.formatted_addresses.recommend
}
}
});
}
});

5. 完整代码

import QQMapWX from "@/libs/qqmap-wx-jssdk.min";
const tMap = new QQMapWX({
key: "00000-11111-22222-33333-44444-55555"
});

// 获得地址 - 微信
export function getLocationByWeiXin() {
getSettingInfo();
}

// 微信 - 获得设备信息
function getSettingInfo() {
uni.getSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
getLocationInfo();
} else {
getAuthorizeInfo();
}
}
})
}

// 微信 - 获得权限
function getAuthorizeInfo() {
uni.authorize({
scope: "scope.userLocation",
success(res) {
getLocationInfo();
},
fail(err) {
uni.showModal({
content: "检测到您没翻开获得定位功用权限，能否去设备翻开？",
confirmText: "确认",
cancelText: "取消",
success: function(res) {
if (res.confirm) {
uni.openSetting({
success() {
getLocationInfo();
}
})
}
}
})
}
})
}

// 微信 - 获得当前经纬度
function getLocationInfo() {
uni.getLocation({
type: "gcj02",
success(data) {
tMap.reverseGeocoder({
location: {
latitude: data.latitude,
longitude: data.longitude
},
success: function(res) {
let result = {
latitude: res.result.location.lat,
longitude: res.result.location.lng,
location: res.result.formatted_addresses.recommend
}
}
});
}
})
}

App定位

进入高德舆图控制图，建立利用获得到安卓和ios的key值。
设置定位信息
翻开manifest.json文件的App模块设置，勾选Geolocation(定位)并填写appkey_ios和appkey_android。

3. 完整代码

import QQMapWX from "@/libs/qqmap-wx-jssdk.min";
const tMap = new QQMapWX({
key: "00000-11111-22222-33333-44444-55555"
});

// 获得地址 - 腾讯
export function getLocationByApp() {
uni.getLocation({
type: 'gcj02',
success: res => {
tMap.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(res) {
let result = {
latitude: res.result.location.lat,
longitude: res.result.location.lng,
location: res.result.formatted_addresses.recommend
}
resolve(result);
}
});
},
fail: error => {
uni.showModal({
content: "检测到您没翻开获得定位功用权限，能否去设备翻开？",
confirmText: "确认",
cancelText: "取消",
success: (res) => {
if (res.confirm) {
uni.getSystemInfo({
success: (sys) => {
if (sys.platform == 'ios') {
plus.runtime.openURL("app-settings://");
} else {
let main = plus.android.runtimeMainActivity();
let Intent = plus.android.importClass("android.content.Intent");
let mIntent = new Intent('android.settings.LOCATION_SOURCE_SETTINGS');
main.startActivity(mIntent);
}
}
})
}
}
})
}
});
}