前端获取用户地理定位

打印 上一主题 下一主题

主题 919|帖子 919|积分 2757

前言:
   定位一般分为两种场景:移动端和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 点击前去申请
  1. <!--
  2. key:填写申请的key
  3. plugin:需要用的插件,如果不填写将 AMap.xxx is not constructor 错误
  4. -->
  5. <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=[申请的key]&plugin=AMap.Geolocation"></script>
复制代码


  • 使用
  1. let geolocation = new AMap.Geolocation({
  2.     enableHighAccuracy: true, // 是否使用高精度定位
  3.     timeout: 10000, // 超时时间,单位为毫秒
  4. });
  5. geolocation.getCurrentPosition(function(status, result) {
  6.      if (status === 'complete') {
  7.          console.log(result); // 定位成功
  8.      } else {
  9.          console.log(result);// 定位失败
  10.      }
  11. });
复制代码
具体使用情况检察高德地图手册点击跳转
2.2 腾讯地图服务

留意:在使用该服务前需要申请 Key 点击前去申请
  1. <!--
  2. key:填写申请的key
  3. plugin:需要用的插件,如果不填写将 AMap.xxx is not constructor 错误
  4. -->
  5.     <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=[申请的key]&referer=location&callback=initMap"></script>
复制代码


  • 使用
  1. let geolocation = new qq.maps.Geolocation('[申请的key]');
  2. geolocation.getLocation((position)=> {
  3.       console.log(position);
  4.   }, (result)=> {
  5.       console.log('获取定位失败', JSON.stringify(result));
  6.   }, {
  7.           timeout: 15000, // 默认值为10s;
  8.           failTipFlag: true
  9.   });
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

小小小幸运

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表