UniApp微信小程序授权获取用户当前位置信息

获取微信小程序的AppID

在uni-app项目中的 manifest.json 文件中的微信小程序获取AppID以及开启位置接口

 

 

 进入腾讯地图api（https://lbs.qq.com/）

注册/登录添加创建应用

在应用下添加Key 

 

 

 

 下载微信小程序JavaScriptSDK 

 

 

 

 将下载的压缩包解压放入项目静态文件夹中

 

 

 

 使用vuex  状态管理实现定位功能

vuex配置：
store 》index.js

import Vue from "vue"
import Vuex from "vuex"
// 引入腾讯地图jssdk文件
import  QQMapWX from "../static/js/qqmap-wx-jssdk.min.js"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        // 默认城市
        
        addressInfo:{
            city: '苏州市',
            district: '昆山市',
            street: '',
            province: '江苏省',
            address: '',
            name: '',
            city_code: '',
            lat: '',
            lng: '',
        }

    },
    mutations: {
        
        newCityFun(state, newCity) {
            state.addressInfo.city = newCity.city
            state.addressInfo.district = newCity.district
            state.addressInfo.street = newCity.street
            state.addressInfo.province = newCity.province
            state.addressInfo.address = newCity.address
            state.addressInfo.name = newCity.name
            state.addressInfo.city_code = newCity.city_code
            state.addressInfo.lat = newCity.lat
            state.addressInfo.lng = newCity.lng
            console.log(state.addressInfo.city)
        }
    },
    actions: {
        getCity(context) {
            // 向用户发起授权请求，弹框提示
            uni.authorize({
                // 获取用户定位信息
                scope: "scope.userLocation",
                // 用户同意授权执行
                success() {
                    // 引入腾讯地图api
                    // 实例化API核心类
                    let qqmapsdk = new QQMapWX({
                        // 填写自己的Key值，这个值是与AppID绑定的
                        key: '6FQBZ-HPUR2-XVDUB-CNI5F-XQBP6-36FL7'
                    });
                    //获取位置信息
                    uni.getLocation({
                        type: 'gcj02',
                        success: function(res) {
                            console.log('当前位置的经度：' + res.longitude)
                            console.log('当前位置的纬度：' + res.latitude)
                            // 逆地址解析方法
                            qqmapsdk.reverseGeocoder({
                                location: {
                                    latitude: res.latitude,
                                    longitude: res.longitude
                                },
                                success(res) {
                                    var newCity = {}
                                    console.log(res)
                                    // 取到用户的定位城市，赋值传递出去
                                    newCity.city = res.result.address_component.city
                                    newCity.district = res.result.address_component.district
                                    newCity.street = res.result.address_component.street
                                    newCity.province = res.result.address_component.province
                                    newCity.address = res.result.address
                                    newCity.name = res.result.ad_info.name
                                    newCity.city_code = res.result.ad_info.city_code
                                    newCity.lat = res.result.location.lat
                                    newCity.lng = res.result.location.lng
                                    context.commit('newCityFun', newCity)
                                },
                                fail(res) {
                                    console.log("逆地址解析失败")
                                    console.log(res)
                                }
                            })
                        }
                    })
                },
                // 若用户不同意授权，弹框提示
                fail(res) {
                    uni.showToast({
                        icon: "none",
                        title: '注意：需要获取您的定位授权,否则部分功能将无法使用',
                        duration: 2000
                    })
                }
            })
        }
    }
})
export default store

页面使用

page 》index.vue

<template>
    <view class="content">
        
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view>{{addressInfo.city}}</view>
        <view>{{addressInfo.district}}</view>
        <view>{{addressInfo.street}}</view>
        <view>{{addressInfo.province}}</view>
        <view>{{addressInfo.address}}</view>
        <view>{{addressInfo.name}}</view>
        <view>{{addressInfo.city_code}}</view>
        <view>{{addressInfo.lat}},{{addressInfo.lng}}</view>
        
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                title: 'Hello',
            }
        },
        onLoad() {

        },
        onReady() {
            this.$store.dispatch('getCity')
        },            
        methods: {

        },
        computed: {
            ...mapState(["addressInfo"])
            // newCity() {
            //     return this.$store.state.city
            //     console.log(this.$store.state.city)
            // }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

使用vuex一定得注意main.js的配置，要不然会报错：Cannot read property 'state' of undefined

 

结果显示