微信页面开发中遇到需要定位设备位置信息的功能，第一反应是现看看浏览器有没有提供这个方法。

一、navigator.geolocation.getCurrentPosition

  1. 浏览器的navigator是用于获取当前设备位置的方法的：navigator.geolocation.getCurrentPosition(_success_, _error_, _options_)<br />[https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/getCurrentPosition](https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/getCurrentPosition)<br />但是该方法在使用中并不尽如人意。<br />下面是一段获取经纬度的代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     * { margin: 0; padding: 0;}
  10.     #box {
  11.       width: 500px;
  12.       height: 500px;
  13.       border: 2px solid deeppink;
  14.     }
  15.   </style>
  16. </head>
  18. <body>
  19.   <button id='btn'> 请求位置信息 </button>
  20.   <div id="box"></div>
  22.   <script>
  23.     let btn = document.getElementById('btn');
  24.     let box = document.getElementById('box');
  26.     //点击按钮获取地理位置信息
  27.     btn.onclick = function () {
  28.       //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取
  29.       //直接navigator.geolocation表示单次获取位置
  30.       navigator.geolocation.getCurrentPosition(function (position) {
  31.         box.innerHTML += "经度" + position.coords.longitude;
  32.         box.innerHTML += "纬度" + position.coords.latitude;
  33.         box.innerHTML += "准确度" + position.coords.accuracy;
  34.         box.innerHTML += "海拔" + position.coords.altitude;
  35.         box.innerHTML += "海拔准确度" + position.coords.altitudeAcuracy;
  36.         box.innerHTML += "行进方向" + position.coords.heading;
  37.         box.innerHTML += "地面速度" + position.coords.speed;
  38.         box.innerHTML += "请求的时间" + new Date(position.timestamp);
  39.       }, function (err) {
  40.         alert(err.code);
  41.       // code：返回获取位置的状态
  42.       // 0  :  不包括其他错误编号中的错误
  43.       // 1  :  用户拒绝浏览器获取位置信息
  44.       // 2  :  尝试获取用户信息，但失败了
  45.       // 3  :   设置了timeout值，获取位置超时了
  46.       }, {
  47.           enableHighAcuracy: false, //位置是否精确获取
  48.           timeout: 5000,            //获取位置允许的最长时间
  49.           maximumAge: 1000          //多久更新获取一次位置
  50.         })
  51.     }
  52.   </script>
  53. </body>
  54. </html>
  1. 在谷歌中年，错误代码 3<br />在IE中，错误代码 1<br />安卓手机浏览器下，错误代码1

所以这种方法被抛弃~
无论是在pc端还是手机浏览器，微信等，我都是授权了允许获取地理位置的，但是还是被禁止了（猜测是浏览器自身禁止了这个方法）。
微信图片_20210623142919.jpg

这个我最想使用的方法不能使用，真的是欲哭无泪。也可能是系统为了安全考虑，浏览器不被允许随便获取位置信息，那为啥还有提供这个API呢，我真的是CTMD！！！

1、为什么会无法使用这个API

关于这个api为什么会无法使用，查找了一些资料，我个人得出的结论是谷歌的位置服务被禁止了。
pc端代码里尝试控制台输出的错误信息是这样的。
image.png

二、尝试微信提供的方法

微信是提供了这个方法的，但是公众号页面好久没开发了，已经不记得需要哪些操作才能调用起微信提供的API了（大概率是现要对网页进行授权，有点印象）。

查找了一下官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

image.png

因为后端也是我写，大致总结一下，整个流程步骤：

获取设备定位流程步骤：

后端：

①获取Access token

参考文档：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

②用获取的access_token来获取jsapi_ticket，

参考文档：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

③通过jsapi_ticket来获取签名

（这一步也可以前端做，为了安全性，最好是后端来做）

前端：

①签名注入

  1. wx.config({
  2.   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  3.   appId: '', // 必填，公众号的唯一标识
  4.   timestamp: , // 必填，生成签名的时间戳
  5.   nonceStr: '', // 必填，生成签名的随机串
  6.   signature: '',// 必填，签名
  7.   jsApiList: [] // 必填，需要使用的JS接口列表
  8. });

②在wx.ready中去调用微信api

  1. wx.ready(function(){
  2.   // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  3.   wx.getLocation({
  4.                 success: function (res) {
  5.                     var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
  6.                     var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
  7.                     var speed = res.speed; // 速度，以米/每秒计
  8.                     var accuracy = res.accuracy; // 位置精度
  9.                     localStorage.setItem("latitude", latitude);
  10.                     localStorage.setItem("longitude", longitude);
  11.                     var data = {
  12.                         latitude: latitude,
  13.                         longitude: longitude
  14.                     };
  15.                     if (typeof callback == "function") {
  16.                         callback(data);
  17.                     }
  18.                 },
  19.                 cancel: function () {
  20.                     //这个地方是用户拒绝获取地理位置
  21.                     if (typeof error == "function") {
  22.                         error();
  23.                     }
  24.                 }
  25.             });
  26. });

③将获取的经纬度传给第三方地图插件

百度地图、腾讯地图、高德地图都可以，具体看公司的需求。
来获取经纬度代表的省市县信息。

例如百度地图代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.   <button onclick="showInfo()">解析经纬度</button>
  13.     <div class="box" style="text-align: center;">
  14.         <div style="font-weight: bold;">获取到的信息</div>
  15.         <div>纬度：<input type="text" id="lat" value="" readonly></div>
  16.         <div>经度：<input type="text" id="lng" value="" readonly></div>
  17.         <div>地址 ：<input type="text" id="address" readonly></div>
  18.     </div>
  19.     <div id='allmap'></div>
  20. </body>
  22. </html>
  23. <script src="http://api.map.baidu.com/api?v=2.0&ak=vtoQgAd5XCDNCFiUqYMKIFGQ1dr1tD1d"></script>
  24. <script>
  25.     const lat = '39.961185'
  26.     const lng = '116.459029'
  28.     var map = new BMap.Map();
  29.     var geoc = new BMap.Geocoder();   //地址解析对象  
  30.     //点击地图时间处理  
  31.     function showInfo() {
  32.         document.getElementById('lng').value = lng
  33.         document.getElementById('lat').value = lat
  34.         var point = new BMap.Point(lng, lat);
  35.         geoc.getLocation(point, function (rs) {
  36.             var addComp = rs.addressComponents;
  37.             var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
  38.             if (confirm("确定要地址是" + address + "?")) {
  39.                 document.getElementById('address').value = address;
  40.             }
  41.         });
  42.     }
  43. </script>

三、直接用百度插件提供的定位方法

通过微信的方法虽然可以准确有效的获取地理位置信息，但是由于比较麻烦，而且公司也没有那么高的要求，是否可以采用百度的定位方法。
笔者猜测百度的js_sdk应该是有提供类似的方法的。最后找到了百度基于IP进行定位的一个方法如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  11.   <div id="allmap"></div>
  12. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vtoQgAd5XCDNCFiUqYMKIFGQ1dr1tD1d"></script>
  13.   <script>
  15.   </script>
  16.   <script type="text/javascript">
  17.     // var map = new BMap.Map();
  18.     var geolocation = new BMap.Geolocation();
  19.         // 我们可以看到此处的写法和浏览器自带api写法类似，查询资料知道这个方法本质上就是navigator的方法（what，为啥我直接用就不行，百度插件就可以，崩溃！）（pc端准确率我感觉能差个二三十公里，我在大兴区，直接给我定位到东城区了）
  20.         // 查询资料发现这个定位是基于浏览器给就近的服务器发送消息来获取的IP定位，因此定位精度堪忧。但是足够我的项目使用了~
  22.     geolocation.getCurrentPosition(function(r){
  23.       console.log(r.point)
  24.       const point = r.point
  25.         reset_location(point)
  26.     });
  28.     function reset_location(po){
  29.       const point = new BMap.Point(po.lng,po.lat);
  30.       var geoc = new BMap.Geocoder();
  31.       geoc.getLocation(point, function(rs){
  32.           const _value = rs.addressComponents;
  33.           const province = _value.province;
  34.           const city = _value.city;
  35.           const county = _value.district;
  36.           const street = _value.street + _value.streetNumber;
  37.           console.log(province)
  38.           console.log(city)
  39.           console.log(county)
  40.       });
  41.     }
  42.     </script>
  43. </body>
  44. </html>