700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序获取位置信息基于腾讯地图实现

微信小程序获取位置信息基于腾讯地图实现

时间:2019-02-28 17:15:46

相关推荐

微信小程序获取位置信息基于腾讯地图实现

准备工作

微信小程序开发平台腾讯地图位置服务使用微信小程序开发者注册获取KEY编辑配置

配置完成进入小程序后台>开发>开发管理>服务器域名,配置request合法域名 :https://apis.进入开发者工具>详细>项目配置更新域名信息下载qqmap-wx-jssdk.min.js放到项目中

编写代码

js文件

//腾讯地图接口var QQMapWX = require('../stait/qqmap-wx-jssdk.js');//路径要在pages文件夹下var qqmapsdk;Page({//初始化位置initLocationInfoMP() {const _this = this;wx.getLocation({//type: 'gcj02', //wgs84返回gps坐标,gcj02返回可用于wx.openLocation 的坐标success: res => {// 将获取到的 经纬度传值给 formatAddress 解析出 具体的地址_this.formatAddress(res.latitude, res.longitude);},fail: res => {_this.$mHelper.toast('获取位置信息失败', 5000);}});},//解析通过微信获取到的经纬度地址async formatAddress(latitude, longitude) {const _this = this;// 通过申请的key生成wxMap实例let map = new wxMap({key: "腾讯地图KEY"});// reverseGeocoder 为QQMapWX解析经纬度的方法map.reverseGeocoder({location: {latitude, longitude},success: res => {//res.result即解析得到的位置信息},fail: () => {_this.$mHelper.toast('获取位置信息失败', 5000);}})},//切换位置点击事件chooseLocationMP() {const _this = this;wx.getSetting({success(res) {if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {uni.showModal({title: '是否授权当前位置',content: '你的位置信息将用于应用展示,请确认授权',success: function(res) {if (res.cancel) {_this.$mHelper.toast('取消授权', 2000);return;}wx.openSetting({success: function(data) {if (data.authSetting["scope.userLocation"] !== true) {_this.$mHelper.toast('授权失败', 5000);return;}_this.$mHelper.toast('授权成功', 2000, 'success');_this.initLocationInfoMP();}})}})} else {wx.chooseLocation({success:(res) => {console.log(res)//res.latitude纬度, res.longitude经度//调用formatAddress解析经纬度得到位置信息},fail:() => {_this.$mHelper.toast('获取位置信息失败', 5000);}});}}});}})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。