单页面应用优化之路一获取用户经纬度信息方案

对于移动端网站来说，获取用户经纬度信息是很常见的，那么今天我们就来说说获取经纬度的几种解决方案，并做一下降级处理的

优化。

一、微信浏览器中通过微信JSSDK获取经纬度信息， => 微信官方使用文档

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

'getLocation'] // 必填，需要使用的JS接口列表

});
wx.ready(() => {
    wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒计
            var accuracy = res.accuracy; // 位置精度
        }
    }); 
}
下面附送判断微信浏览器方法

function is_weixin(){

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)=="micromessenger") {

return true;

} else {

return false;

}

}
    二、 H5 定位

Geolocation

if (navigator.geolocation) {   
 navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions])
}
positionOptions拥有三个属性{enableHighAccuracy:boolean（false） , timeout:long , maximumAge:long}
返回值举例

{

coords: {

accuracy: 65,

altitude: 5.394156455993652,

altitudeAccuracy: 10,

heading: null,

latitude: 31.284644494949962,

longitude: 121.178569601469,

speed: null

timestamp: 1551261514387

}

支持的浏览器并不少，但不支持的也有，所以判断很有必要

    三、 高德定位 ==> 高德JSSDK开发手册

       使用高德地图，按照开发手册照搬就好了，注意一点，http会很慢，https会好很多，官方也建议把升级http到https

    四、 高德ip地址定位url方式(简单粗暴，其实是从高德组件中摘出来的，稳定性无法保证，突出一个快)

    https://webapi.amap.com/maps/ipLocation?key=你申请的key&callback=jsonp_1
    
    jsonp_1 回调函数

    返回值举例 {"lng":"121.2318146","lat":"31.2193590","info":"LOCATE_SUCCESS","status":1}
        
        承认错误：第四点有问题
        
        高德API 应该是购买企业级web服务API 第三点用的是高德jssdk API ，两个API的key 不共享

        调用方式 https://restapi.amap.com/v3/ip?key=XXX

  这个API返回的经纬度是一个区域的左上角和右下角的经纬度坐标值，那为什么不用上面那个呢，因为上面那个4g下无法取到值。。。。。。

优化 建议保存至缓存中，若缓存中没有，使用

Promise.race 1、2和4、3 race方式