H5 移动端获取当前位置
3种方法:
1、H5自带的方法,获取经纬度
2、通过地图提供的JS。获取位置
3、通过微信的API(这个需要公众号 / 小程序)
1、通过H5自带的获取经纬度的方法
优点:
需要引用的资源较少,H5自带的方法
缺点:
1、获取的经纬度偏差较大,如果需要配合地图使用,还需要使用地图提供的经纬度转换方法
2、目前大多数浏览器(包括手机端),已经不支持http的请求获取用户地址,必须为https域名的才能发起请求。目前测试,在安卓手机的微信打开的浏览器和IE浏览器还能支持获取经纬度
JS:
// 获取当前经纬度
getLocation: function () {
var that = this
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
alert('经度:'+ position.coords.latitude)
alert('纬度:'+ position.coords.longitude)
}, function (error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert('用户拒绝对获取地理位置的请求。')
break;
case error.POSITION_UNAVAILABLE:
alert('位置信息是不可用的。')
break;
case error.TIMEOUT:
alert('请求用户地理位置超时。')
break;
case error.UNKNOWN_ERROR:
alert('未知错误。')
break;
}
}, { enableHighAcuracy: false });
} else {
alert('Geolocation is not supported by this browser.')
}
},
2、通过地图定位
简单说下:
其实所有地图的定位,也是基于H5的定位(所以很多时候引入地图定位的时候,可能会报一个警告,和H5一样,报错信息如上图),在进行的坐标计算,那如果是不支持H5获取定位的呢?那么地图的API则会根据IP,查询粗略位置,定位的准确度为城市级。详情可以看下百度地图的API。
代码部分:
引入地图js(百度地图)<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
if (navigator.geolocation) {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
alert('您的位置:'+r.point.lng+','+r.point.lat);
}else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
} else {
alert('Geolocation is not supported by this browser.')
}
结果:http地址下ios定位比较准确,Android 定位在地级市。
解决:http 换成 https
3、微信提供的API (这个必须有公众号才能实现)
1、确保公众号的配置一切正常(合法域名、token、回调地址、JS合法域名…)
2、引入相关的JS文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
3、获取签名 => 初始化需要请求的API => 获取定位
// 这里的ajax请求,是为了获取签名(都是后端的工作了。根据文档生成签名等)
$.ajax({
type: "post",
url: "你自己的生成签名的地址",
data: {
// 这里好像是需要回调的地址
'askUrl': encodeURIComponent(location.href.split('#')[0])
},
dataType: "json",
success: function (data) { // 生成签名后,开始使用微信的 wx.config 。其中jsApiList就是我们要用的API的列表,因为只需要取经纬度,所以用getLocation就可以了
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
jsApiList: [
'getLocation'
]
});
wx.error(function (res) {
alert("失败:"+res.msg");
}); // wx.config 检测无误后,会进入到 ready 方法 。 注意type参数。微信多数的坐标体系都为gcj02
wx.ready(function () {
wx.getLocation({
type: "gcj02",
success: function (res) {
latitude = res.latitude;
longitude = res.longitude;
},
cancel: function (res) {
alert("定位失败,权限不足")
},
});
});
}
});
总结:目前的H5获取定位,都需要HTTPS的支持
。而微信的api则需要公众号才行,各有优缺点。更多详细的内容,可以查看相关的文档
参考:https://blog.csdn.net/Jioho_chen/article/details/83592630
H5 移动端获取当前位置的更多相关文章
- H5高德地图获取当前位置
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- H5 高德地图获取当前位置信息
返回结果:jsonp_393330_({"status":"1","info":"OK","infocode& ...
- 亲历H5移动端游戏微信支付接入及那些坑(二)——获取Openid和授权
第一篇中将一些坑说明,那么这篇开始正式进入接入步骤.具体的参数说明,我不会列出,毕竟微信官方文档都有,我想大家都看的懂,而且这接口也有可能微信会变动,所以不列出来,也是不想引起大家的误解,接入步骤只起 ...
- FineReport移动端如何获取地址位置
对于企业大多数员工来说,由于其工作位置是固定的,可以有多种方式进行上班打卡签到以保证该员工有按时正常来上班,但是对于经常需要出差,去客户现场的员工来说,就无法保证他们是否有去上班,所以希望能通过手机位 ...
- 调用微信JsAPI端获取位置
public partial class test : BasePage { protected test() { AccessPage = PageWebType.WX; } protected s ...
- pc和移动端获取滚动条的位置
移动端获取滚动条:document.body.scrollTop pc端获取滚动条:document.documentElement.scrollTop
- H5移动端知识点总结
H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开 ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- CAS 单点登录 移动端获取TGT、ST 已经移动端登录页面不进行跳转的设置
一.设置移动客户端验证ST通过后,页面不进行302重定向跳转 修改web.xml <!--**************************************************** ...
随机推荐
- Day2-转自金角大王
本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 ...
- Vue项目根据不同运行环境打包项目
前提 项目是直接通过 vue-cli脚手架 生成的: 假设在项目开发中,分为三个环境 -- · 测试环境· 预生产环境· 生产环境 每个环境的接口地址都是不同的,而 vue-cli 给出的环境只有 d ...
- javascript里的eval总结
JavaScript eval() 函数 1.定义和用法 eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参 ...
- 会话技术之Session(购物车加入、查看和清空)
会话技术之Session session:服务器端会话技术 当我们第一次访问的服务器的时候,服务器获取id, 能获取id 要拿着这个id去服务器中查找有无此session 若查找到了:直接拿过来将数据 ...
- 【水滴石穿】LoginScreen_Firabase_ReactNativeApp_Redux
先看效果 分析代码我们会发现,它使用了firebase 关于登陆部分应该是实时数据库,应该是他们后端校验的 //app.js //这里使用了实时数据库 import React, { Componen ...
- 国内首个全域边缘节点服务发布,阿里云助力企业把握5G机遇
7月24日,阿里云峰会开发者大会在上海世博中心举办.作为2019年首场最受瞩目的云计算开发者大会,阿里云携一众云计算技术大牛与开发者面对面,探讨各自领域的技术干货与前沿趋势.同时,也发布了多项重大重磅 ...
- 一文纵览EMAS 到底内含多少阿里核心技术能力
申请阿里云EMAS,体验一站式移动研发平台,更多精彩尽在开发者会场 EMAS的整体定位是阿里巴巴移动技术对外输出的主窗口,沉淀了阿里巴巴近10年在移动互联网技术架构上的积累以及在一系列垂直场景中所实践 ...
- 数据挖掘python,java
互联网公司zamplus诚聘以下职位: (1)数据挖掘工程师 (Location:上海.北京) 岗位职责: 1. 研究基于sponsored search, content match和behavio ...
- nodeJs koa-generator脚手架
koa-generator 脚手架 全局安装:cnpm install -g koa-generator 查看版本:koa2 --version 创建项目:koa2 project 默认的是用jade ...
- 小爬爬5:重点回顾&&移动端数据爬取1
1. ()什么是selenium - 基于浏览器自动化的一个模块 ()在爬虫中为什么使用selenium及其和爬虫之间的关联 - 可以便捷的获取动态加载的数据 - 实现模拟登陆 ()列举常见的sele ...