微信小程序定位使用腾讯地图根据经纬度逆解析出所在城市具体位置

定位是多数app或小程序中常见的功能点,通过定位可以更为精准的将数据推送给用户以此来更方便用户使用。

本篇就来介绍在uni-app开发中如何使用定位和腾讯地图提供的逆解析来获取到用户当前所在具体位置。

主要功能点:

    先进行获取用户当前所在的经纬度,再根据获取的经纬度解析出用户当前所在的位置。

关于逆解析用户所在位置,就需要用到腾讯地图提供的key及微信小程序JavaScriptSDK。


如图所示,需要下载JavaScriptSDK和在服务器域名中配置request合法域名。

JavaScriptSDK下载地址https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

定位逆解析所在具体位置完整代码:

<script>
var QQMapWX = require('@/utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js');
var qqmapsdk;
export default {
data() {},
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: '腾讯地图开放平台申请的key'
});
},
onShow: function () {
let _this = this
// 请求定位权限
uni.authorize({
scope: 'scope.userLocation',
success() {
// 权限授予成功
uni.getLocation({
type: 'wgs84',
success: function (address) {
console.log('当前位置的经度:' + address.longitude);
console.log('当前位置的纬度:' + address.latitude);
qqmapsdk.reverseGeocoder({
location: {
latitude: address.latitude,
longitude: address.longitude
},
success: function (res) {
console.log(res)
},
fail: function (res) {
uni.showToast({
title: '定位失败,请手动选择',
duration: 2000,
icon:'none'
});
},
complete: function (res) {
console.log(res);
}
});
}
});
},
fail() {
// 权限授予失败
uni.showModal({
title: '提示',
content: '此功能需要定位权限,请设置打开权限',
success: function(modalRes) {
if (modalRes.confirm) {
// 引导用户去设置中打开权限
uni.openSetting();
}
}
});
}
});
}
}
</script>

代码解析:

    uni.authorize使用scope.userLocation获取用户是否授权进行定位。

    uni.getLocation获取到当前所在经纬度。

    qqmapsdk.reverseGeocoder使用经纬度来逆向解析出具体位置。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!