前端获取用户地理定位

前言：
   定位一般分为两种场景：移动端和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
  });