前端获取用户地理定位的方法及一些注意事项
作者：眼镜大马猴
这篇文章主要介绍了移动端和PC端在使用定位过程中需要注意的事项,包括系统GPS打开、定位权限、页面授权等,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言：
定位一般分为两种场景：移动端和PC，下面分别讲下这两个场景在使用定位过程中的一些注意事项。
- 移动端
移动端包括手机，pad和其它带有GPS定位芯片的智能设备（如手表、音箱等），移动端的系统包括iOS和Android。成功完成定位需要达成以下前提条件：
系统GPS打开
所使用的App或浏览器已获取定位权限
对打开的页面允许使用定位
对于iOS10以上系统和Android的一些版本已禁止在非HTTPS协议的域名下定位，请尽快将站点升级到HTTPS- PC端
因为pc设备上大都没有GPS芯片，所以在PC上的定位主要通过IP精准定位服务
1 GetCurrentPosition API
这是H5新推出的地理位置API，但从性能和精确度上来说相对较差，使用者几乎没有。
2 第三方服务
2.1 高德地图服务
注意：在使用该服务前需要申请 Key 点击前往申请
<!-- key:填写申请的key plugin：需要用的插件，如果不填写将 AMap.xxx is not constructor 错误 --> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=[申请的key]&plugin=AMap.Geolocation"></script>
- 使用
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位
timeout: 10000, // 超时时间，单位为毫秒
});
geolocation.getCurrentPosition(function(status, result) {
if (status === 'complete') {
console.log(result); // 定位成功
} else {
console.log(result);// 定位失败
}
});
具体使用情况查看高德地图手册点击跳转
2.2 腾讯地图服务
注意：在使用该服务前需要申请 Key 点击前往申请
<!--
key:填写申请的key
plugin：需要用的插件，如果不填写将 AMap.xxx is not constructor 错误
-->
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=[申请的key]&referer=location&callback=initMap"></script>
- 使用
let geolocation = new qq.maps.Geolocation('[申请的key]');
geolocation.getLocation((position)=> {
console.log(position);
}, (result)=> {
console.log('获取定位失败', JSON.stringify(result));
}, {
timeout: 15000, // 默认值为10s;
failTipFlag: true
});总结
到此这篇关于前端获取用户地理定位的方法及一些注意事项的文章就介绍到这了,更多相关前端获取用户地理定位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！