单页面应用优化之路一获取用户经纬度信息方案
对于移动端网站来说,获取用户经纬度信息是很常见的,那么今天我们就来说说获取经纬度的几种解决方案,并做一下降级处理的
优化。
一、微信浏览器中通过微信JSSDK获取经纬度信息, => 微信官方使用文档
优化。
一、微信浏览器中通过微信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 定位
Geolocationif (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方式
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」