网站建设网站系统选择,网络服务平台,怎么自己建网站,电子商务网站 技术方案目录
前言
效果展示
一、在腾讯定位服务配置微信小程序JavaScript SDK
二、使用uni-app获取定位的经纬度
三、 逆地址解析#xff0c;获取精确定位
四、小提示 前言
效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK
在浏览器搜索腾讯定位服务#xff0c;找…目录
前言
效果展示
一、在腾讯定位服务配置微信小程序JavaScript SDK
二、使用uni-app获取定位的经纬度
三、 逆地址解析获取精确定位
四、小提示 前言
效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK
在浏览器搜索腾讯定位服务找到官方网站利用微信或者其他账号注册登录登录后如下图操作 点进去之后可以看到如下图红色框框的操作指导 第一步和第二步主要是申请秘钥和配置服务可以直击点击我的应用跳转、接下来如下图片所示操作 成功创建就会有如下图片的情况 点击添加Key,然后进行配置 配置成功就会获得Key 第三步、下载微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2 其中的一个即可然后解压文件后将其放入项目中我这里放入在我的common组件中 第四步可以忽略第五步就是将文件引入到你想要展现定位的页面把申请的Key引入到onLoad生命周期中 var QQMapWX require(../../common/lib/qqmap-wx-jssdk.min.js); this.qqmapsdk new QQMapWX({key: 3SUBZ-W5BCQ-FLM5G-GYOPG-D523V-DUFNH}); 二、使用uni-app获取定位的经纬度
在uni-app的API中找到位置 将如下的代码放入mounted生命周期中获取经纬度
uni.getLocation({type: wgs84,success: function (res) {console.log(当前位置的经度 res.longitude);console.log(当前位置的纬度 res.latitude);}
}); 这里还需要在manifest.json中的源码视图中添加一段配置权限的代码 permission : {scope.userLocation : {desc : 获取当前定位}} 三、 逆地址解析获取精确定位
调用qqmapsdk.reverseGeocoder的方法在其中属性location中调用经纬度这里要注意需要使用gcj02还需要
通过属性success, fail, complete的回调参数来接收调用结果success的回调参数可以有2个第1个参数接收调用结果第2个参数控制返回处理后的数据非必须参数,示例success:function(res,data) address是自己定义为空来接收地址req中有如下内容 address只要获取到定位即可req.result.address
mounted() {uni.getLocation({type: gcj02,highAccuracyExpireTime: 100,success: (res {this.qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success:(req{this.address req.result.addressconsole.log(this.address);})})})});
}, 最后在页面上渲染address即可 代码段中highAccuracyExpireTime: 100,是高精度定位超时时间(ms)指定时间内返回最高精度该值3000ms以上高精度定位才有效果可以写也可以不写。
四、小提示
如果无法出现定位效果需要降低调式基库的版本 结束语 以上就是本次分享的全部内容有任何问题都可以私信我
