小程序获取当前位置所在的城市

╰半夏微凉° 2022-05-21 03:57 227阅读 0赞

1、话不多说，直接上干货

先来张目录结构

![70][]

① index.wxml

<view class="retailStore">
       <view class="cnaps  borderBottom">
        <text>所在城市：</text>
        <text class='m-bbt'>{
       {province}} {
       {city}}</text>
      </view>
    </view>

②index.js

插入提示:

1. 申请开发者密钥（key）：[申请密钥][Link 1]

2. 下载微信小程序JavaScriptSDK，[微信小程序JavaScriptSDK v1.0][JavaScriptSDK v1.0]           下载完成后放入utils文件夹下引用即可

3. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

测试用的话可以在微信开发工具中选择详情，如下图

![70 1][]

//index.js
    //获取应用实例
    const app = getApp();
    var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
    var qqmapsdk;
    Page({
      data: {
        province: '',
        city: '',
        latitude: '',
        longitude: ''
      },
      onLoad: function () {
        qqmapsdk = new QQMapWX({
          key: 'xxxx-xxxx-xxxx-xxxx' //自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请
        });
      },
      onShow: function () {
        let vm = this;
        vm.getUserLocation();
      },
      getUserLocation: function () {
        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();
            }
          }
        })
      },
      // 微信获得经纬度
      getLocation: function () {
        let vm = this;
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            console.log(JSON.stringify(res))
            var latitude = res.latitude
            var longitude = res.longitude
            var speed = res.speed
            var accuracy = res.accuracy;
            vm.getLocal(latitude, longitude)
          },
          fail: function (res) {
            console.log('fail' + JSON.stringify(res))
          }
        })
      },
      // 获取当前地理位置
      getLocal: function (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.setData({
              province: province,
              city: city,
              latitude: latitude,
              longitude: longitude
            })
    
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            // console.log(res);
          }
        });
      }
    })

效果图：

![70 2][]

谢谢观看，随便转载！！~~~（任性 蜜汁微笑）

仓库地址：[项目地址][Link 2]

[70]: /images/20220521/9a74359d168c477b92bcbdc206ec8ca2.png
[Link 1]: http://lbs.qq.com/console/key.html
[JavaScriptSDK v1.0]: http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip
[70 1]: /images/20220521/b61776dc17ce42c7900c9b9e8062903b.png
[70 2]: /images/20220521/2c7371503bf8424990f6ceb98f429d81.png
[Link 2]: https://github.com/quhongqiang/wechat-Positioning-the-current-city