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 移动端获取当前位置相关推荐

  1. 获取地理位置定位信息-app端

    获取地理位置定位信息-app端 getLoad() {let site = {}let onSuccess = (position) => {site.code = 0//获取经纬度site.p ...

  2. h5获取安卓定位_关于H5+ 安卓离线打包后,无法获取定位问题。

    // 扩展API加载完毕后调用onPlusReady回调函数 document.addEventListener('plusready', onPlusReady, false); // 扩展API加 ...

  3. 联系微信ID服务器失败,微信小程序-新用户获取微信手机号登录服务端获取不到unionid情况...

    需求:微信小程序进行获取手机号登录时,登录失败 授权微信用户信息 授权微信手机号 bindLogin: function(e) { wx.hideLoading(); console.log(e.de ...

  4. h5 调起相机_H5移动端调用相机或相册

    一: 前提 在做H5时,有时要实现拍照功能,这就要调取手机端的相机,当时,在网上搜了很多能实现的方式,最后还是用html5自带的 input标签,实现移动端调用手机摄像头.好了,话不多说,下面就是我实 ...

  5. h5页面禁止复制_H5移动端页面禁止复制技巧

    前言:业务需要,需要对整个页面禁止弹出复制菜单. 在禁止的页面中加入以下css样式定义 * { -webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-use ...

  6. android获取安卓版本,Android开发:获取安卓App版本号的方法步骤

    今天国庆节,在这举国欢庆的日子里,发一篇博文留念一下这个特殊的日子,国庆依然奋战在工作一线. 在Android开发过程中,想要开发一个完整功能的App,各个地方的内容都要涉及到,比如获取App的系统版 ...

  7. 高德地图获取手机定位

    1.引入高德地图 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15 ...

  8. 微信端H5使用百度地图定位获取当前位置安卓定位不准

    微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...

  9. h5手机端或PC端利用高德地图获取当前定位位置

    踩的坑写在前面: 想直接利用h5的特性来获取,但是一直报错,需要https服务,结果还去了阿里云搞ssl的域名卡住了,然后一直报未检测到DNS配置记录,如果你们服务是https就可以直接用这个了. 后 ...

最新文章

  1. 将assembly包添加到自己的maven仓库
  2. 网站颜色搭配的好网站。
  3. iPhone12 safeArea顶部区域尺寸变化
  4. vue-cli3打包注意路径的问题
  5. 从 Dropdown 的 React 实现中学习到的
  6. PHP 5.6.30连接SAP GUI 730 配置(SAPRFC)
  7. Linux opencv安装与编译
  8. 5.9 QR分解--Gram-Schmidt 分解
  9. c/c++ 编程试题
  10. 信息学奥赛一本通(1250:The Castle)
  11. Python爬虫中最重要、最常见、一定要熟练掌握的库
  12. 典型的SPI控制器的结构
  13. linux /proc/stat 计算线程cpu,Linux下用/proc/stat文件来计算cpu的利用率(附源码)
  14. MySQL 批量插入申请自增 ID
  15. win10 开热点 【服务主机:网络服务】 疯狂跑流量的解决方案 亲测有效!!!!
  16. 按键精灵提交表单发起post请求
  17. RFC 文档(501-1000)
  18. 一个大概是被称作为“废物”的程序员的回顾,从18岁到30岁
  19. Flaash大气纠正 ENVI
  20. 老男孩python课程表_老男孩Python全栈开发(92天全)视频教程 自学笔记14

热门文章

  1. 学会线性表,一篇就够了
  2. 华东交通大学2018年ACM“双基”程序设计竞赛 D
  3. 「解析」牛客网-华为机考企业真题 1-20
  4. burpsuite解决中文乱码的问题
  5. 我长这么好看,首先要感谢我父母
  6. QNX neutrino 实时操作系统的原理
  7. win10-win11任务栏网速实时监控显示
  8. PartMaker 走心机车削 车铣编程视频教程 PartMaker资料
  9. oracle连接耗尽,linux熵池耗尽,导致oracle数据库连接失败
  10. 【详细】Jmeter的安装配置与基本操作