uniapp 仿钉钉打卡 - 获取定位篇

怎么实现定位？

这里用的是腾讯地图，高德地图同理参考高德的文档。 腾讯地图使用方式参考官方文档：JavaScript API | 腾讯位置服务 (qq.com)

首先需要在微信开发者平台申请调用getLocation 的权限 然后在mainfest.js中配置，配置完重启项目

  "mp-weixin": {
    /* 微信小程序特有相关 */
    "appid": "wxxxxxxxxxxxxx2",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "小程序将使用定位功能"
      }
    }
  },

记得提前导入所需地图js库 const QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js')

getLocation() {
    // 当前位置
    const that = this
    uni.getLocation({
            type: 'gcj02',
            success(res) {
                    that.latitude = res.latitude
                    that.longitude = res.longitude
                    that.getAddress(res.longitude, res.latitude)
            },
            fail(res) {
                    that.getAddress(that.longitude, that.latitude)
            }
    })
},
getAddress(lng, lat) {
    try {
            const qqmapsdk = new QQMapWX({
                key: 'XXXXXXXXXX' //这里填写自己申请的key
            })
            qqmapsdk.reverseGeocoder({
                    location: {
                            latitude: lat,
                            longitude: lng
                    },
                    success: (res) => {
                            let address_component = res.result.address_component
                            let recommend = res.result.formatted_addresses.recommend
                            this.address = address_component.province + address_component.city + recommend  
                    },
                    fail: (res) => {
                            // 错误时处理
                    }
            })
    } catch (e) {
           // 错误时处理
    }
		}

<view class="textAddress">当前位置:{{ address }}</view>

地图调用属于隐私，调用定位前需要授权

async checkLocation() {
    try {
        let that = this
        uni.getSetting({
        success(res) {
            let hasLocationPermission = res.authSetting['scope.userLocation']
            if (!hasLocationPermission) {
                uni.showModal({
                title: '提示',
                content: '为了正常使用位置功能，请开启位置权限',
                showCancel: false,
                confirmText: '去开启',
                success: function (modalRes) {
                if (modalRes.confirm) {
                        uni.authorize({
                                scope: 'scope.userLocation',
				success() {                                                                                    that.getLocation()
                                },
                                fail() {                                                                                        // 用户未开启权限                                                                                        uni.showModal({
                                                                                                                              title: '提示',
                                                                                                                              content: '获取位置权限失败，请手动开启',
                                                                                                                              showCancel: false,
                                                                                                                            })
                            }
                    })
            }
    }
})
} else {
that.getLocation()
}
}
})

} catch (e) {
           // 错误时处理
}
}