IT评测·应用市场-qidao123.com

标题: 前端获取用户地理定位 [打印本页]

---

作者: 小小小幸运    时间: 2025-3-13 14:52
标题: 前端获取用户地理定位
前言：
   定位一般分为两种场景：移动端和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企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4