更新记录

1.0.0（2022-06-09）

1. 新增 检测用户是否授权
2. 新增 检测设置定位服务权限是否打开
3. 优化 组件加载

0.0.1（2022-01-27）

版本上线

平台兼容性

插件简绍

插件原理

对腾讯地图的前端定位组件进行二次封装。地图组件 | 腾讯位置服务 (qq.com)

使用环境

本插件只支持H5平台。因部分浏览器调用位置需要 https 环境，推荐大家还是把 https 环境配置上。

插件使用

插件已支持 uni_modules 支持组件easycom，以下代码演示的是普通使用

<!-- HTML -->
<mumu-getlocation ref='muLocation'></mumu-getlocation>
<button type="default" @click="getLocation">获取精准位置</button>

import mumuGetlocation from '@/uni_modules/mumu-getlocation/components/mumu-getlocation/mumu-getlocation.vue'
    export default {
        components: {
            mumuGetlocation
        },
    data() {
            return {
                locationRef: null, // 用于接收定位对象
            }
        },
    onLoad() {
      // 使用 $nextTic 等待组件加载完成调用
            this.$nextTick(() => {
        // 在检测用户是否开启定位权限需要一个过程，推荐使用 login 提示一下
                uni.showLoading({
                    title: '定位组件加载中...',
                    mask: true
                })
        // 初始化组件，并且检测是否开启与授权定位
                this.$refs.muLocation.__init().then(location => {
          // 用户授权了和开启了定位，把定位对象保存到 data 中
                    this.locationRef = location
                    uni.hideLoading()
                }, err => {
          // 用户拒绝了定位请求，获取系统没有开启定位功能
                    uni.hideLoading()
                    if (err.code === 1) {
                        uni.showModal({
                            title: '获取定位权限失败',
                            content: '你拒绝了位置授权服务。请允许当前页面获取定位授权，后刷新页面。'
                        })
                    } else {
                        uni.showModal({
                            title: '获取定位权限失败',
                            content: '请确定手机定位已打开，并且当前浏览器允许获取定位，都开启后请刷新页面。'
                        })
                    }
                })

            })
        },
    methods: {
            // 获取精准定位
            getLocation() {
                this.locationRef.getLocation() // 调用 getLocation 方法获取精准定位
                    .then(res => {
            // res 就是返回的数据
                        uni.showModal({
                            content:JSON.stringify(res, null, 4)
                        })
                    })
            },
        }
    }

相关 API

可传属性（Props）

无

组件内部方法（Event）

通过 refs 调用

定位对象属性

案例演示

支持作者