微信小程序基于腾讯地图定位功能

1.获取appid和腾讯位置服务的key

(1).获取appid

480280354ec85df91e2854520204937.png

*位置服务选择打开，appid具体请到微信公众平台申请，地址：微信公众平台 (qq.com)

(2).获取key

image.png

*腾讯位置服务地址：https://lbs.qq.com/

*注册登录后，点击控制台 》 key与配额 》 key管理 》创建新密钥，完成如图配置

*下载微信小程序JavaScriptSDK https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip

*下载后解压放入本地项目中 image.png

2.发起微信定位授权

// 自定义一个定位的方法存储逻辑
        getLocationScope() {
//uniapp官方方法（原生请到官方自行查看）
            uni.getSetting({
                success: res => {
                    if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
                            'scope.userLocation'] != true) {
                       //发起授权的弹框
                        uni.showModal({
                            title: '请求授权当前位置',
                            content: '需要获取您的地理位置，请确认授权',
                            success: res => {
                                if (res.cancel) {
                                    uni.showToast({
                                        title: '拒绝授权',
                                        icon: 'none'
                                    });
                                } else if (res.confirm) {
                                    uni.openSetting({
                                        success: dataAu => {
                                            if (dataAu.authSetting[
                                                    'scope.userLocation'] == true) {
                                                uni.showToast({
                                                    title: '授权成功',
                                                    icon: 'none'
                                                });
                                              //获取定位的方法
                                                this.geo();
                                            } else {
                                                uni.showToast({
                                                    title: '授权失败',
                                                    icon: 'none'
                                                });
                                            }
                                        }
                                    });
                                }
                            }
                        });
                    } else if (res.authSetting['scope.userLocation'] == undefined) {
                        this.geo();
                    } else {
                        this.geo();
                    }
                },
                complete() {
                }
            });
        },

3.获取定位

//自定义一个获取定位的方法
    geo() {
            let QQMap = require('../../static/mapPugin/qqmap-wx-jssdk.min.js'); // SDK放置的路径
            let qqmapsdk = new QQMap({
                key: '' // 注册获取到自己的申请Key
            });
            uni.getLocation({
                type: 'gcj02',
                //isHighAccuracy: true,
                success: res => {
                    console.log('当前位置的经度：' + res.longitude);
                    console.log('当前位置的纬度：' + res.latitude);
                    uni.setStorageSync('lon', res.longitude);
                    uni.setStorageSync('lat', res.latitude);
                        //腾讯位置服务官方提供逆地址解析
                    qqmapsdk.reverseGeocoder({
                        // 根据经纬度转化为地址
                        location: {
                            latitude: res.latitude,
                            longitude: res.longitude
                        },
                        success: res => {
                        //获取到地址后进行的后续逻辑操作
                            console.log(res);
                            uni.showToast({
                                title: '定位成功',
                                duration: 2000
                            });
                        }
                    });
                },
                fail: () => {
                    //获取失败的操作
                }
            });
        },

4.发布到微信公众平台*

(1).将https://apis.map.qq.com配置到微信公众平台的开发》开发管理》开发设置》服务器域名中》request合法域名，配置合法访问域名

(2).开发管理》接口设置》开通获取定位服务 image.png

(3).上传审核发布即可

5.定位失败处理

image.png

如果遇到当前情况请打开[uniapp]项目的配置文件manifest.json，选择“源码视图”：

/* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "  ",
        "setting" : {
            "urlCheck" : false,
            "postcss" : false,
            "minified" : true,
            "es6" : true
        },
        "usingComponents" : true,
        "permission" : {
            "scope.userLocation" : {
                "desc" : "将获取你的具体位置信息，用于小程序位置接口的效果展示"
            }
        },
        "requiredPrivateInfos" : [ "getLocation" ],
    },

*加入："requiredPrivateInfos" : [ "getLocation" ],