微信小程序(获取定位)

实现微信小程序定位并不难,但是如果第一次接触的话还是很懵,这里就记录一下,方便自己复习或大家借鉴吧!

首先重点有两条:

通过微信小程序api: wx.getLocation(Object object)获取当前所在的经纬度; 小程序api详情
通过腾讯地图开放平台逆地址解析获取的经纬度,获取真实地标名称; 腾讯地图平台

具体操作:
(腾讯地图方面的操作)
3. 注册腾讯地图开放平台:

4. 申请开发者密钥（Key）：申请密钥 https://lbs.qq.com/dev/console/key/add
成功后会返回一串key,这个key后面会用到

5. 控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存

(微信平台方面的操作)
6. 配置安全域名微信公众平台 https://mp.weixin.qq.com/
. 微信公众平台登录你的小程序->开发->开发设置->服务器域名->将https://apis.map.qq.com填入request合法域名

7. 下载小程序sdk(复制链接打开新标签页即可下载) http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip
8. 解析压缩文件夹,放入小程序项目文件内,也可以有规划的新建一个文件夹专门存放此类文件,我放在新建的libs内的
9. 使用:

//app.json文件
//这是因为开发者需要填写获取用户地理位置的用途说明。不配置的话会提示需要申明{"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}
}
}

//在需要使用的页面引入:
let QQMapWX = require('./libs/qqmap-wx-jssdk')
let qqmapsdk;getLocation() {qqmapsdk = new QQMapWX({key: 'CBAJ-DUD-EURJ-JFFJD' //之前在腾讯平台申请到的key})wx.getLocation({ //获取定位地址经纬度type: 'wgs84',success(res) {const latitude = res.latitudeconst longitude = res.longitudeconst speed = res.speedconst accuracy = res.accuracyqqmapsdk.reverseGeocoder({ //SDK调用location: {latitude,longitude},success: (res) => {//success方法指向闭包，所以this属于闭包,所以在success回调函数里是不能直接使用this.setData()的  //可以通过外面将this赋值给其它变量,也可通过promise二次封装,避免回调地狱console.log(res)}})}})}

我的完整实现:

let QQMapWX = require('./libs/qqmap-wx-jssdk')
let qqmapsdk;Page({data: {location: '定位我...', //显示定位的数据},async onShow(options) { //实现页面显示有授权则获取地标,没授权,只能通过用户点击获取按钮来获取let res = await wxAuthorize()if (res) {this.getLocation()} else {this.setData({location: '定位我...' })}},async getLocation() {qqmapsdk = new QQMapWX({key: 'CBAJ-DUD-EURJ-JFFJD'})const res = await new Promise((resolve) => {wx.getLocation({ //获取地址经纬度type: 'wgs84',success(res) {resolve(res);}})})const latitude = res.latitudeconst longitude = res.longitudeconst res2 = await new Promise(resolve => {qqmapsdk.reverseGeocoder({ //SDK调用这里只需要具体到城市,所以这两个就够,具体可根据业务需求获取location: {latitude,longitude},success: (res) => {resolve(res) }})})this.setData({location: res2.result.ad_info.city })},async getData() {const isAuth = await wxAuthorize();if (isAuth) {this.getLocation()} else {wx.showModal({title: '请授权当前位置',content: '需要获取您的地理位置,请授权!!!',showCancel: true,confirmText: '去授权',success: function (res) {if (res.confirm) {wx.openSetting({success(res) {console.log(res.authSetting, res, "答应授权")this.getLocation()}})}}});}},//工具函数,封装的Promise,判断是否授权,可以避免回调地狱
async function wxAuthorize(scope = 'scope.userLocation') {return new Promise(resolve => {wx.authorize({scope,//发起定位授权success: ()=> {console.log('有定位授权')//授权成功，此处调用获取定位函数resolve(true)},fail(){console.log("没有同意授权定位")resolve(false)}})})
}})

微信小程序(获取定位)相关推荐

微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿首先我们需要引入腾 ...
uniapp微信小程序获取定位（通过经纬度获取地址）
项目要求首页有个定位功能,但是uni.getLocation在小程序端只能获取到经纬度,拿不到地址 uniapp官网有说明这点:uni.getLocation(OBJECT) | uni-app官网 ...
微信小程序获取定位数据
对于微信小程序的api文件只能获取坐标数据,代码如下: wx.getLocation({ success: res => { console.log("位置信息:" + re ...
微信小程序获取当前所在城市（地区定位与切换）
小程序地区定位与切换添加链接描述添加链接描述添加链接描述 <text class="chengshi">{{citynames}}</text>< ...
解决通过微信小程序获取的定位坐标在百度地图渲染误差过大问题
微信小程序可以获取两种坐标系的经纬度,分别为WGS84(大地坐标系)和GCJ02(国测局坐标系)而百度却是在其基础上进行加密形成了自己的一套坐标系bd09(百度坐标系),如果直接用微信小程序获取的经纬 ...
微信小程序获取OneNet数据显示温湿度
微信小程序获取OneNet数据显示温湿度一.OneNet平台 1.我这里的设备是通过MQTT协议连接到OneNet平台的 2.微信小程序获取OneNet数据需要得到产品的api-key.设备 ...
微信小程序python解析获取用户手机号_微信小程序获取用户手机号
获取微信用户绑定的手机号,需先调用wx.login接口. 小程序获取code. 后台得到session_key,openid. 组件触发getPhoneNumber 因为需要用户主动触发才能发起获取手 ...
微信小程序获取Onenet温湿度数据并控制灯亮灭
其实之前就写过类似的文章,但是看过我博客的朋友就知道,我是先写微信小程序获取onenet,然后再写esp32上云到onenet.一篇是ESP32-C3通过MQTT协议把温湿度上传到OneNet平台 ...
微信小程序获取API实现功能
微信小程序渐渐覆盖生活的方方面面,工具类小程序也由于它实用与方便结合的优势受到大众追捧,小程序通过开放的API完善自身功能,类似获取地图API可以通过小程序获取定位,通过百度翻译API小程序可以制作翻 ...

微信小程序(获取定位)

微信小程序(获取定位)相关推荐

最新文章

热门文章