微信小程序获取地理位置源码

//这是前端
	<view class='address_parent'>
         <text class='address'>我的位置:{{province}}{{city}}{{district}}{{street}}{{street_number}}</text>
    </view>

//大量js来了,前方高能
//首先必须在js文件的头部引入
//下载地址:https://lbs.qq.com/qqmap_wx_jssdk/index.html
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
	var qqmapsdk;
//因为小程序只能获得经纬度,所以我们需要第三方,将经纬度转化为地理位置
//想要转化必须去微信公众平台->开发->开发者工具中打开腾讯位置服务
//https://mp.weixin.qq.com/wxopen/thirdtools?action=index&token=1190223945&lang=zh_CN
//打开之后之后申请key用来实例化对象用
//js的
data{
	province: '',  //省
    city: '',      //市
    district: '',   //区
    street: '',     //路  
    street_number: '', //号
    latitude: '',
    longitude: ''
}
onLoad: function (query) {
	this.getUserLocation();
}
getUserLocation: function () {
    var 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.getSetting({
                  success:function (dataAu) {
                    console.log(dataAu.errMsg);
                    if (dataAu.errMsg =='getSetting:ok') {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权,调用wx.getLocation的API
                      console.log(vm);
                      vm.getLocation();
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] != undefined) {
          //调用wx.getLocation的API
          console.log(res.authSetting['scope.userLocation']);
          this.getLocation();
        }
        else {
          //调用wx.getLocation的API
          this.getLocation();
        }
      }
    })
  },
  // 微信获得经纬度
  getLocation: function () {
    var vm=this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log(res);
        qqmapsdk = new QQMapWX({
          key: 'SDXBZ-R67W4-DWXUV-X6E3E-PCJDS-6EFIS'
        });
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function (res) {
            let province = res.result.address_component.province
            let city = res.result.address_component.city
            let district = res.result.address_component.district
            let street = res.result.address_component.street
            let street_number = res.result.address_component.street_number
            vm.setData({
              province: province,
              city: city,
              district: district,
              street: street,
              street_number: street_number,
              latitude: res.latitude,
              longitude: res.longitude
            })
          },
          fail: function (res) {
            console.log('网络错误');
          },
        })
      },
      fail: function (res) {
        console.log('fail' + JSON.stringify(res))
      }
    })
  },
//一气呵成,直接ok
//源码,请勿转载~~~
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值