微信小程序 获取地理位置

uniapp组件代码

<template>
    <div class="locationCmpt" v-if="show">
        <image class="icon" src="https://photo.zast地图图片" />
        <div class="locationTip">{{ locationTip }}</div>

        <button open-type="openSetting" class="btn">立即开启</button>
    </div>
</template>
<script>
import { getLocation } from './location.js'

export default {
    props: {
        locationTip: {
            type: Boolean,
            default: '请开启地理位置权限，为你展示当地活动'
        }
    },
    data() {
        return {
            show: false
        }
    },
    computed: {
        latitude() {
            return this.$store.state.location.latitude
        }
    },
    watch: {
        latitude(val) {
            if (val) {
                this.show = false
            }
        }
    },
    created() {
        this.init()
        this.addOnShow()
    },
    methods: {
        getLocation() {
            return getLocation()
        },
        /**子组件监听组件所在页面的onShow事件 */
        addOnShow() {
            let pages = getCurrentPages()
            const curPage = pages[pages.length - 1]
            const originShow = curPage.onShow

            curPage.onShow = (param) => {
                console.log('地址组件被显示')
                originShow.call(curPage, param)
                if (!this.$store.state.location.city) {
                    this.init()
                }
            }
        },
        init() {
            getLocation()
                .then((res) => {
                    if (res && res.city) {
                        this.show = false
                        this.$emit('getCitySuccess', res)
                    } else {
                        this.show = true
                    }
                })
                .catch(() => {
                    this.show = true
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.locationCmpt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;

    width: 686rpx;
    height: 446rpx;
    background: #ffffff;
    border-radius: 24rpx;

    .icon {
        width: 120rpx;
        height: 120rpx;
    }
    .locationTip {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #030912;
        line-height: 38rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;

        margin-top: 12rpx;
        margin-bottom: 24rpx;
    }

    .btn {
        padding: 10rpx 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #ff3a6d;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        background-color: #fff;
        border-radius: 42rpx;
        border: 2rpx solid #ff3a6d;
    }
}
</style>

js文件代码

import store from '@/store/index.js'


const UserLocationKey = 'scope.userLocation'
const innerGetLocation = () => {
    return wx
        .authorize({ scope: UserLocationKey })
        .then((res) => {
            if (res.errMsg !== 'authorize:ok') {
                return Promise.reject(res)
            } else {
                return wx.getLocation({
                    type: 'wgs84'
                })
            }
        })

        .then((res) => {
            console.log('获取到的地理位置信息是', res)
            const pos = { latitude: res.latitude, longitude: res.longitude }

            return new Promise((success,fail) => {
                wx.request({
                    url: 'https://restapi.amap.com/v3/geocode/regeo',
                    method: 'GET',
                    data: {
                        key: 'xxxxx',
                        location: `${pos.longitude},${pos.latitude}`
                    },
                success(result){
                    const { statusCode, data } = result
                    console.log('高德地图解析接口',result)
                    if (statusCode == 200) {
                        const { addressComponent } = data.regeocode
                        const city = Array.isArray(addressComponent.city) ? addressComponent.district : addressComponent.city
                        const wxCity = city;// city.replace('市', '')
                               console.log('城市名称',wxCity)
                        // const { province, district: wxTown } = addressComponent
                        // $fetch.get(apiCommon.updateWxCity, { wxProvince: province.replace('省', ''), wxCity, wxTown })
             
                        // 把 location.city 也更新, 有些地方用的这个字段
                        const locationResult= {
                            city: wxCity, ...pos,
                            province:addressComponent.province,
                        }
                        store.commit('setLocation',locationResult)
    
                        success( locationResult);
                    
                    } else {
                        success( {}); 
                    }
                  
                    },
                    fail(res) {
                        console.log('把经纬度解析为城市报错',res)
                      fail({})  
                    }
                })  
            })
          
          
          
        })
        .catch((res) => {
            console.log('获取地理位置失败', res)
            return {}
        })
}
export const getLocation = async () => {
    if (store.state.location.latitude) {
        return store.state.location
    }
    wx.showLoading({
        title: '加载中'

    });
 
    return wx.getSetting().then((res) => {
        if (res.authSetting[UserLocationKey] === undefined) {
            //未授权过
            console.log('未授权过地理位置')
            return innerGetLocation()
        } else if (res.authSetting[UserLocationKey] === false) {
            //已授权过但是没有获得权限
            console.log('已授权过但是没有获得权限')
            return {}
        } else {
            //已授权过 并且得到权限了
            console.log('已授权过并且已经得到权限')
            return innerGetLocation()
        }
    }).finally(() => {
        wx.hideLoading();
    })
}