微信小程序地理位置权限申请及使用教程

2024-06-26 22:57| 来源: 网络整理| 查看: 265

准备工作

需要在微信开发者平台中注册一个小程序账号，微信开发者平台官网如下微信公众平台

申请流程

登录微信开发者平台后，在左侧选项栏点击开发-开发管理

在开发管理中点击接口设置，在下面就可以进行地理位置权限申请了，其中wx.getFuzzyLocation接口是比较好申请的。

使用教程

编译器:Hbuilder 运行器:微信开发者工具

首先在manifest.json文件中配置小程序的位置信息,

/* 小程序特有相关 */ "mp-weixin" : { "appid" : "wxa8e6388009466d0c", "setting" : { "urlCheck" : false }, "usingComponents" : true, "permission" : { "scope.userFuzzyLocation":{ "desc":"位置信息效果展示" } }, "requiredPrivateInfos" : [ "getFuzzyLocation" ] },

配置manifest.json后还需要配置page.json

"permission":{ "scope.userLocation":{ "desc":"获得用户当前位置" }, "scope.userFuzzyLocation":{ "desc":"获得用户当前位置" } },

最后就可以调用接口

获取位置 export default { data() { return { longitude:"", latitude:"", scale:8 } }, methods: { getLocation() { uni.authorize({ scope: 'scope.userLocation', success: function (res) { uni.getFuzzyLocation({ success: function(res) { this.longitude = res.longitude this.latitude = res.latitude console.log(res.longitude) console.log(res.latitude) } }); } }) } } }

取到的坐标值转换成具体的方位，这里我们测试用到的是腾讯地图，这里我们需要先做一下小小的准备。

A、首先，你得有一个可以用的微信小程序appid，自行去小程序开发平台复制下，就不用写了哈~~~~

B、腾讯地图的使用key密钥：

然然然后，下载skd的js文件到你的项目中，并且引入：

//腾讯地图接口文件 var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js'); // 实例化API核心key是腾讯地图秘钥 var qqmapsdk = new QQMapWX({ key: 'ISEBZ-W5IWZ-MJNXT-Z62VZ-WNBZT-XCB7D' // 必填 });

好了，现在已经有了一串你看不懂的密钥，直接复制下，使用逆地址解析的方法，

let qqmapsdk = new QQMapWX({ key: 'Hxxxxx-xxxxxxxxxxxxxxxxxxxx-xxxxx6' }); 在获取经纬度的成功回调里写入： //逆地址解析 qqmapsdk.reverseGeocoder({ location:{ latitude: res.latitude, longitude: res.longitude }, success(res){ console.log("res",res); } })

完整代码：

获取位置 const app = getApp(); //腾讯地图接口文件 var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js'); // 实例化API核心key是腾讯地图秘钥 var qqmapsdk = new QQMapWX({ key: '' // 必填 }); export default { data() { return { longitude:"", latitude:"", scale:8, addressurl:'/pages/test/index', } }, onShow(){ this.getLocation(); }, methods: { getLocation() { uni.authorize({//授权 scope: 'scope.userLocation', success(){ uni.getFuzzyLocation({ success: function(res) { this.longitude = res.longitude this.latitude = res.latitude console.log(res.longitude) console.log(res.latitude) qqmapsdk.reverseGeocoder({//腾讯地图接口 location:{ latitude: res.latitude, longitude: res.longitude }, success(res){ console.log("res",res); } }) } }); }, fail(res){ console.log(res); } }) }, } }

【本文地址】

公司简介

联系我们