文章目录
- 前言
- 一、 Geolocation API
- 二、微信 SDK
- 1.引入jssdk
- 2. 获取签名,注入配置
- 3. 调用JS-SDK api 获取位置
- 三、第三方服务(腾讯地图服务)
-
- 总结
前言
定位一般分为两种场景:移动端和PC,下面分别讲下这两个场景在使用定位过程中的一些注意事项。
- 移动端
移动端包括手机,pad和其它带有GPS定位芯片的智能设备(如手表、音箱等),移动端的系统包括iOS和Android。成功完成定位需要达成以下前提条件:
- 系统GPS打开
- 所使用的App或浏览器已获取定位权限
- 对打开的页面允许使用定位
- 对于iOS10以上系统和Android的一些版本已禁止在非HTTPS协议的域名下定位,请尽快将站点升级到HTTPS
- PC端
因为pc设备上大都缺少GPS芯片,所以在PC上的定位主要通过IP精准定位服务
一、 Geolocation API
这是HTML5新推出的地理位置API,但从性能和精确度上来,都不理想。尤其PC端精确地非常低且经常获取失败。用者甚少。
二、微信 SDK
这种适用于在微信H5场景应用(比如公众号H5),只能在微信浏览器内使用微信的SDK。
1.引入jssdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2. 获取签名,注入配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用。从后台获取配置信息,拿到appId
、timestamp
、nonceStr
、signature
,通过wx.config
注入配置信息
$http({
method: 'GET',
url: '/wechat/ticket/V3' + '?url=' + encodeURIComponent(location.href),
}).then(
function successCallback (sign) {
wx.config({
debug: false,
appId: sign.appId,
timestamp: sign.timestamp,
nonceStr: sign.nonceStr,
signature: sign.signature,
jsApiList: [
...,
'getLocation',
'openLocation',
]
});
},
function errorCallback (response) {
console.info(response)
}
);
3. 调用JS-SDK api 获取位置
function getLocation() {
return new Promise(function (resolve,reject) {
if (browser.versions.weixin) {
wx.ready(function () {
wx.getLocation({
type: 'gcj02',
success: function (res) {
resolve({
latitude: res.latitude,
longitude: res.longitude,
speed: res.speed,
accuracy: res.accuracy
});
},
cancel: function () {
reject('定位失败,请重新获取并允许定位');
},
fail: function () {
reject('定位失败,请检查您设备权限后重新尝试');
}
});
});
wx.error(function(err) {
reject(`wxjsapi-error: ${err}`)
})
} else {
reject('定位失败,请在微信中打开');
}
})
}
三、第三方服务(腾讯地图服务)
- 在使用该服务前需要申请个人开发秘钥:https://lbs.qq.com/dev/console/key/manage
- 前端定位组件:https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation
1.引入js文件
引入封装好的JS文件,通过调用js api的接口获取定位信息
js引入地址:https://apis.map.qq.com/tools/geolocation/min?key=yourkey&referer=myapp
key : 必填,开发密钥(key)
function loadMap() {
var url = 'https://apis.map.qq.com/tools/geolocation/min?key=[your key]&referer=location&callback=initMap';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
}
2.获取定位
window.initMap = function () {
var geolocation = new qq.maps.Geolocation([your key]);
geolocation.getLocation(function success(position) {
$scope.position = position;
}, function error(result) {
console.log('获取定位失败', JSON.stringify(result));
}, {
timeout: 15000,
failTipFlag: true
});
}
定位成功返回结果:
{ "module":"geolocation",
"nation": "中国",
"province": "广东省",
"city":"深圳市",
"district":"南山区",
"adcode":"440305",
"addr":"深圳大学杜鹃山(白石路北250米)",
"lat":22.530001,
"lng":113.935364,
"accuracy":13
}
总结
获取用户定位在移动端业务场景上用的非常多。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)