微信小程序授权获取用户当前经纬度位置并转换为具体城市

每日一句激励人心的鸡汤:
    认真阅读接口文档,
    认真阅读接口文档,
    认真阅读接口文档。

微信小程序获取用户当前经纬度位置

getLocation() API文档传送门,查看文档后你会发现想要拿到用户当前所在位置的经纬度,你还得经过他的授权,就是你进入一个小程序的时候,他会弹出一个框:XX小程序现在想要获取你的位置>>>>>授权授权授权,可以用 wx.getSetting,wx.openSetting , wx.authorize 来引导获取用户的授权,然后看文档吧,我下面就贴代码

// 微信获得经纬度
		getLocation() {
		  let that = this;
		  wx.getLocation({
		    type: 'wgs84',//wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
		    success(res) {
		      console.log(JSON.stringify(res))
		      var latitude = res.latitude
		      var longitude = res.longitude
		      var speed = res.speed
		      var accuracy = res.accuracy;
		      that.getLocal(latitude, longitude)
		    },
		    fail(res) {
		      console.log('fail' + JSON.stringify(res))
		    }
		  })
		},
// 微信授权 获取当前地理位置
		getUserLocation() {
		    let vm = this;
		    wx.getSetting({
		      success: (res) => {
		        console.log(JSON.stringify(res))
		        // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
		        // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
		        // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
		        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
		          wx.showModal({
		            title: '请求授权当前位置',
		            content: '需要获取您的地理位置,请确认授权',
		            success: function (res) {
		              if (res.cancel) {
		                wx.showToast({
		                  title: '拒绝授权',
		                  icon: 'none',
		                  duration: 1000
		                })
		              } else if (res.confirm) {
		                wx.openSetting({
		                  success: function (dataAu) {
		                    if (dataAu.authSetting["scope.userLocation"] == true) {
		                      wx.showToast({
		                        title: '授权成功',
		                        icon: 'success',
		                        duration: 1000
		                      })
		                      //再次授权,调用wx.getLocation的API
		                      vm.getLocation();
		                    } else {
		                      wx.showToast({
		                        title: '授权失败',
		                        icon: 'none',
		                        duration: 1000
		                      })
		                    }
		                  }
		                })
		              }
		            }
		          })
		        } else if (res.authSetting['scope.userLocation'] == undefined) {
		          //调用wx.getLocation的API
		          vm.getLocation();
		        }
		        else {
		          //调用wx.getLocation的API
		          vm.getLocation();
		        }
		      }
		    })
		  },

转换为具体城市

  申请密钥通过经纬度去确认位置需要用到第三方接口,这里用的是腾讯地图的
  百度微信搜索下载微信小程序JavaScriptSDK,获得新道具qqmap-wx-jssdk.min,放到我们的util下面
  安全域名设置:百度搜索微信小程序,进入,扫码登录的你的账号,在“设置” -> “开发设置”的服务器域名中设置request合法域名,添加  https://apis.map.qq.com
最后还要在我们项目的配置SDK的设置,我用的是uniapp写的,就在manifest.json中这样写道:

"mp-weixin" : {
        /* 小程序特有相关 */
        "appid" : "我的微信小程序id",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
        /*我们添加的内容↓↓↓↓↓↓*/
        "permission" : {
            "scope.userLocation" : {
                "desc" : "获取位置"
            }
        }
    }
let QQMapWX = require('../../../utils/qqmap-wx-jssdk.min.js')
let qqmapsdk;
// 获取当前地理位置
		getLocal(latitude, longitude) {
		  let vm = this;
		  qqmapsdk.reverseGeocoder({
		    location: {
		      latitude: latitude,
		      longitude: longitude
		    },
		    success: function (res) {
		      // console.log(JSON.stringify(res));
		      let province = res.result.ad_info.province
		      let city = res.result.ad_info.city
		        vm.province=province,
		        vm.city=city,
		        vm.latitude=latitude,
		        vm.longitude=longitude
		    },
		    fail: function (res) {
		      console.log(res);
		    },
		    complete: function (res) {
		      // console.log(res);
		    }
		  });
		},
		handleGetRegion(region){
			var that = this;
			for(let i in region) {
				if(i==1) {
					that.city = region[i].name
					console.log(region[i].name)
					}
				}
			}

你可能感兴趣的:(javascript)