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

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

优化。
        
        一、微信浏览器中通过微信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方式
posted @   南巷清风--大R  阅读(234)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示