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

 

結果顯示