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