parent
b1e733c01c
commit
02d613067c
@ -0,0 +1,6 @@ |
||||
## 1.0.0（2022-06-09） |
||||
1. 新增 检测用户是否授权 |
||||
2. 新增 检测设置定位服务权限是否打开 |
||||
3. 优化 组件加载 |
||||
## 0.0.1（2022-01-27） |
||||
版本上线 |
||||
@ -0,0 +1,97 @@ |
||||
// #ifdef H5
|
||||
window.qq = window.qq || {}, qq.maps = qq.maps || {}, window.soso || (window.soso = qq), soso.maps || (soso.maps = qq |
||||
.maps), qq.maps.Geolocation = function() { |
||||
"use strict"; |
||||
var e = [], |
||||
t = null, |
||||
o = 0, |
||||
n = "_geoIframe_" + Math.ceil(1e7 * Math.random()), |
||||
i = document.createElement("iframe"), |
||||
r = null, |
||||
s = null, |
||||
a = null, |
||||
c = null, |
||||
u = function(u, l) { |
||||
if (!u) return void alert("请输入key！"); |
||||
if (!l) return void alert("请输入referer！"); |
||||
var p = document.getElementById(n); |
||||
if (!p) { |
||||
i.setAttribute("id", n), i.setAttribute("allow", "geolocation"); |
||||
var g = "https:"; |
||||
i.setAttribute("src", g + "//apis.map.qq.com/tools/geolocation?key=" + u + "&referer=" + l), i |
||||
.setAttribute("style", "display: none; width: 100%; height: 30%"), document.body ? document |
||||
.body |
||||
.appendChild(i) : document.write(i.outerHTML); |
||||
var m = this; |
||||
window.addEventListener("message", function(n) { |
||||
var i = n.data; |
||||
if (i && "geolocation" == i.module) { |
||||
if (clearTimeout(c), e.length > 0) { |
||||
var u = e.shift(); |
||||
u.sucCb && u.sucCb(i) |
||||
} |
||||
o = 2, m.executeNextGeo(), t && t(i) |
||||
} else { |
||||
s = (new Date).getTime(); |
||||
var l = s - r; |
||||
if (l >= a) { |
||||
if (e.length > 0 && "geo" === e[0].type) { |
||||
var u = e.shift(), |
||||
p = { |
||||
type: "fail", |
||||
code: 5, |
||||
message: "The request" |
||||
}; |
||||
u.errCb && u.errCb(p) |
||||
} |
||||
clearTimeout(c), o = -1, m.executeNextGeo() |
||||
} |
||||
if (e.length > 0 && "ip" === e[0].type) { |
||||
var u = e.shift(); |
||||
u.errCb && u.errCb(p) |
||||
} |
||||
} |
||||
}, !1) |
||||
} |
||||
}; |
||||
return u.prototype.executeNextGeo = function() { |
||||
1 !== o && e.length > 0 && (o = 1, e[0].geoprocess()) |
||||
}, u.prototype.getLocation = function(t, n, i) { |
||||
if (i && i.timeout) { |
||||
var r = new RegExp("^[0-9]*$"); |
||||
if (!r.test(i.timeout)) return void alert("timeout 请输入数字") |
||||
} |
||||
if (e.length > 10) throw new Error("geolocation queue must be lass than 10"); |
||||
e.push({ |
||||
sucCb: t, |
||||
errCb: n, |
||||
option: i, |
||||
geoprocess: this.getOnceLocation, |
||||
type: "geo" |
||||
}), 1 !== o && (o = 1, this.getOnceLocation()) |
||||
}, u.prototype.getOnceLocation = function() { |
||||
var t = e[0] && e[0].option; |
||||
r = (new Date).getTime(), a = t && t.timeout ? +t.timeout : 1e4, clearTimeout(c), c = setTimeout( |
||||
function() { |
||||
if (e.length > 0) { |
||||
var t = e.shift(); |
||||
t.errCb && t.errCb() |
||||
} |
||||
}, a), document.getElementById(n).contentWindow.postMessage("getLocation", "*") |
||||
}, u.prototype.getIpLocation = function(t, n) { |
||||
if (e.length > 10) throw new Error("geolocation queue mast be lass than 10"); |
||||
e.push({ |
||||
sucCb: t, |
||||
errCb: n, |
||||
geoprocess: this.getOnceIpLocation, |
||||
type: "ip" |
||||
}), 1 !== o && (o = 1, this.getOnceIpLocation()) |
||||
}, u.prototype.getOnceIpLocation = function() { |
||||
document.getElementById(n).contentWindow.postMessage("getLocation.robust", "*") |
||||
}, u.prototype.watchPosition = function(e) { |
||||
t = e, document.getElementById(n).contentWindow.postMessage("watchPosition", "*") |
||||
}, u.prototype.clearWatch = function() { |
||||
t = null, document.getElementById(n).contentWindow.postMessage("clearWatch", "*") |
||||
}, u |
||||
}(); |
||||
// #endif
|
||||
@ -0,0 +1,74 @@ |
||||
<template> |
||||
<view> |
||||
|
||||
</view> |
||||
</template> |
||||
<script> |
||||
import './geolocation.min.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
myMap: {} |
||||
} |
||||
}, |
||||
mounted() { |
||||
//this.__init() |
||||
}, |
||||
methods: { |
||||
__init() { |
||||
if (origin.indexOf('https') === -1) throw '请在 https 环境中使用本插件。' |
||||
if (!navigator || !navigator.geolocation) throw '地理位置服务不可用' |
||||
|
||||
const options = { |
||||
enableHighAccuracy: true, |
||||
timeout: 5000, |
||||
maximumAge: 0 |
||||
}; |
||||
|
||||
/** err 说明 |
||||
code 1 表示用户拒绝授权 |
||||
code 3 未获取到地址信息，可能是设备没有开启定位服务或者系统没有给浏览器定位权限 |
||||
* */ |
||||
return new Promise((resolve, rejace) => { |
||||
navigator.geolocation.getCurrentPosition((res) => { |
||||
this.myMap = new qq.maps.Geolocation("7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB", |
||||
"地图标点"); |
||||
resolve(this) |
||||
}, rejace, options) |
||||
}) |
||||
}, |
||||
getLocation() { |
||||
return new Promise((resolve, reject) => { |
||||
this.myMap.getLocation(res => { |
||||
resolve(res) |
||||
}, err => { |
||||
reject(err) |
||||
}) |
||||
}) |
||||
}, |
||||
getIpLocation() { |
||||
return new Promise((resolve, reject) => { |
||||
this.myMap.getIpLocation(res => { |
||||
resolve(res) |
||||
}, err => { |
||||
reject(err) |
||||
}) |
||||
}) |
||||
|
||||
}, |
||||
watchPosition(callBack) { |
||||
this.myMap.watchPosition(res => { |
||||
callBack(res) |
||||
}) |
||||
}, |
||||
clearWatch() { |
||||
this.myMap.clearWatch() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,84 @@ |
||||
{ |
||||
"id": "mumu-getlocation", |
||||
"displayName": "h5定位组件_获取精准定位_获取ip定位（可持续定位）", |
||||
"version": "1.0.0", |
||||
"description": "不需要任何 SDK 即可简单实现获取用户位置相关信息。可直接获取城市", |
||||
"keywords": [ |
||||
"定位", |
||||
"ip位置", |
||||
"持续定位", |
||||
"获取城市", |
||||
"" |
||||
], |
||||
"repository": "", |
||||
"engines": { |
||||
"HBuilderX": "^3.1.0" |
||||
}, |
||||
"dcloudext": { |
||||
"category": [ |
||||
"前端组件", |
||||
"通用组件" |
||||
], |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "获取定位" |
||||
}, |
||||
"npmurl": "" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": [], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
}, |
||||
"App": { |
||||
"app-vue": "n", |
||||
"app-nvue": "n" |
||||
}, |
||||
"H5-mobile": { |
||||
"Safari": "y", |
||||
"Android Browser": "y", |
||||
"微信浏览器(Android)": "y", |
||||
"QQ浏览器(Android)": "y" |
||||
}, |
||||
"H5-pc": { |
||||
"Chrome": "y", |
||||
"IE": "y", |
||||
"Edge": "y", |
||||
"Firefox": "y", |
||||
"Safari": "y" |
||||
}, |
||||
"小程序": { |
||||
"微信": "n", |
||||
"阿里": "n", |
||||
"百度": "n", |
||||
"字节跳动": "n", |
||||
"QQ": "n" |
||||
}, |
||||
"快应用": { |
||||
"华为": "u", |
||||
"联盟": "u" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,107 @@ |
||||
# 插件简绍 |
||||
|
||||
## 插件原理 |
||||
|
||||
> 对腾讯地图的前端定位组件进行二次封装。[地图组件 | 腾讯位置服务 (qq.com)](https://lbs.qq.com/webApi/component/componentGuide/componentMarker) |
||||
|
||||
## 使用环境 |
||||
|
||||
**本插件只支持H5平台。因部分浏览器调用位置需要 https 环境，推荐大家还是把 https 环境配置上。** |
||||
|
||||
## 插件使用 |
||||
|
||||
**插件已支持 uni_modules 支持组件easycom，以下代码演示的是普通使用** |
||||
|
||||
``` html |
||||
<!-- HTML --> |
||||
<mumu-getlocation ref='muLocation'></mumu-getlocation> |
||||
<button type="default" @click="getLocation">获取精准位置</button> |
||||
``` |
||||
|
||||
``` 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() | 无 | 关闭持续监听 | 无 | 无 | |
||||
|
||||
## 案例演示 |
||||
|
||||
 |
||||
|
||||
## 支持作者 |
||||
|
||||
 |
||||
Loading…
Reference in new issue