# 插件简绍 ## 插件原理 > 对腾讯地图的前端定位组件进行二次封装。[地图组件 | 腾讯位置服务 (qq.com)](https://lbs.qq.com/webApi/component/componentGuide/componentMarker) ## 使用环境 **本插件只支持H5平台。因部分浏览器调用位置需要 https 环境,推荐大家还是把 https 环境配置上。** ## 插件使用 **插件已支持 uni_modules 支持组件easycom,以下代码演示的是普通使用** ``` html ``` ``` js 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 调用** | 方法 | 传参 | 说明 | 返回类型 | 返回数据 | | ------ | ---- | ------------------------------------ | -------- | -------------------------- | | __init | 无 | 初始化组件,检测用户是否开启定位权限 | 对象 | 定位对象,用于后续方法调用 | **定位对象属性** | 方法名 | 传参 | 说明 | 返回(return) | 返回数据 | | --------------- | -------- | ------------ | -------------- | ---------------- | | getLocation() | 无 | 获取精准定位 | Promise | 精准定位数据 | | getIpLocation() | 无 | 获取ip定位 | Promise | 获取ip定位数据 | | watchPosition() | function | 持续监听定位 | 数据 | 持续监听定位数据 | | clearWatch() | 无 | 关闭持续监听 | 无 | 无 | ## 案例演示 ![](https://h5plugin.mumudev.top/public/getLocation/qrcode.png) ## 支持作者 ![支持作者](https://student.mumudev.top/wxMP.jpg)