h5获取安卓定位_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(百度地图)
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文件
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则需要公众号才行,各有优缺点。更多详细的内容,可以查看相关的文档
h5获取安卓定位_H5 移动端获取当前位置相关推荐
- 获取地理位置定位信息-app端
获取地理位置定位信息-app端 getLoad() {let site = {}let onSuccess = (position) => {site.code = 0//获取经纬度site.p ...
- h5获取安卓定位_关于H5+ 安卓离线打包后,无法获取定位问题。
// 扩展API加载完毕后调用onPlusReady回调函数 document.addEventListener('plusready', onPlusReady, false); // 扩展API加 ...
- 联系微信ID服务器失败,微信小程序-新用户获取微信手机号登录服务端获取不到unionid情况...
需求:微信小程序进行获取手机号登录时,登录失败 授权微信用户信息 授权微信手机号 bindLogin: function(e) { wx.hideLoading(); console.log(e.de ...
- h5 调起相机_H5移动端调用相机或相册
一: 前提 在做H5时,有时要实现拍照功能,这就要调取手机端的相机,当时,在网上搜了很多能实现的方式,最后还是用html5自带的 input标签,实现移动端调用手机摄像头.好了,话不多说,下面就是我实 ...
- h5页面禁止复制_H5移动端页面禁止复制技巧
前言:业务需要,需要对整个页面禁止弹出复制菜单. 在禁止的页面中加入以下css样式定义 * { -webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-use ...
- android获取安卓版本,Android开发:获取安卓App版本号的方法步骤
今天国庆节,在这举国欢庆的日子里,发一篇博文留念一下这个特殊的日子,国庆依然奋战在工作一线. 在Android开发过程中,想要开发一个完整功能的App,各个地方的内容都要涉及到,比如获取App的系统版 ...
- 高德地图获取手机定位
1.引入高德地图 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15 ...
- 微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...
- h5手机端或PC端利用高德地图获取当前定位位置
踩的坑写在前面: 想直接利用h5的特性来获取,但是一直报错,需要https服务,结果还去了阿里云搞ssl的域名卡住了,然后一直报未检测到DNS配置记录,如果你们服务是https就可以直接用这个了. 后 ...
最新文章
- 将assembly包添加到自己的maven仓库
- 网站颜色搭配的好网站。
- iPhone12 safeArea顶部区域尺寸变化
- vue-cli3打包注意路径的问题
- 从 Dropdown 的 React 实现中学习到的
- PHP 5.6.30连接SAP GUI 730 配置(SAPRFC)
- Linux opencv安装与编译
- 5.9 QR分解--Gram-Schmidt 分解
- c/c++ 编程试题
- 信息学奥赛一本通(1250:The Castle)
- Python爬虫中最重要、最常见、一定要熟练掌握的库
- 典型的SPI控制器的结构
- linux /proc/stat 计算线程cpu,Linux下用/proc/stat文件来计算cpu的利用率(附源码)
- MySQL 批量插入申请自增 ID
- win10 开热点 【服务主机:网络服务】 疯狂跑流量的解决方案 亲测有效!!!!
- 按键精灵提交表单发起post请求
- RFC 文档(501-1000)
- 一个大概是被称作为“废物”的程序员的回顾,从18岁到30岁
- Flaash大气纠正 ENVI
- 老男孩python课程表_老男孩Python全栈开发(92天全)视频教程 自学笔记14