京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

Html5获取用户当前位置的几种方式

2024-11-3 02:24| 发布者: db4d5a85| 查看: 118| 评论: 0

摘要: 前言 前段时间写到H5获取用户当前位置,百度了许多多少种办法都没实现,包罗H5自带的方法,具体题目不知道出在那里了,基本都是报错啥的,下面一起看看吧~ 一、利用H5自带的获取位置 先利用navigator.geolocation判

前言

前段时间写到H5获取用户当前位置,百度了许多多少种办法都没实现,包罗H5自带的方法,具体题目不知道出在那里了,基本都是报错啥的,下面一起看看吧~

一、利用H5自带的获取位置

先利用navigator.geolocation判断浏览器是否支持,假如不支持就提示大概利用其他方法。

[code] if(navigator.geolocation) { navigator.geolocation.getCurrentPosition((res)=> { console.log(res);//这里会返回经纬度,然后还要通过经纬度转换地区名称 }); } [/code]

 总结
1、部分手机和浏览器不太支持这个API,还会有告诫报错,以是感觉这个API有点鸡肋,不太能用得上。
2、假如必要展示地区名称,还必要别的引入雷同百度地图的第三方平台提供的js进行经纬度转换地区名称等。
3、浏览器地址必须是https的,否则不支持。

二、利用百度地图获取位置

1、在百度地图开发平台注册账号,并申请ak密钥
2、在页面中引用百度地图js,(vue项目就在index.html中引用)

[code] <body> <div id="app"></div> <!-- built files will be auto injected --> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=qI3333RVsdret2A9999VC858Q&s=1"></script> </body> [/code]

3、在页面中写入下面代码(可以直接返回经纬度和省市区名称等):

[code] mounted() { //获取当前城市 var geolocation=new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ var city=r.address.city//返回当前城市 that.currCity = city; }) }, [/code]

 

总结
这样手机上就会有弹框提示获取位置啦,这个方法可以适用于微信浏览器和普通浏览器,基本没有题目,没有bug,尝试起来!就是必要公司去申请ak会比较麻烦,并且也必要https才可以利用,相对于第一个还是很好用很有结果的。

三、微信js-sdk自带的API

登录微信平台获取appid和秘钥

设置服务器信息,和js接口安全域名、网页授权域名等

把设置信息文件.txt放到设置的服务器下面

查看所有的接口权限,是否有获取用户地理位置

通过调接口的方式获取时间戳,签名等

[code] wx.ready(function () { wx.checkJsApi( { jsApiList : ['getLocation'], success : function (res) { if (!res.checkResult.getLocation) { alert('暂不支持获取地理位置接口,请升级微信版本!'); return; } } }) wx.getLocation( { success : function (res) { console.log(res)//地理位置信息都在这里 }, cancel : function (res) { alert('用户拒绝授权位置信息!'); } }) }) [/code]

总结

一共枚举的三种H5获取地理位置的方式,假如不是在公众号中非必要的情况下还是比较推荐利用雷同百度地图这样的第三方获取,比较方便,并且百试百灵,一开始不想用第三方的东西就计划用H5自带的API弄了很久试了许多多少个手机和浏览器都没乐成,真是心碎。

到此这篇关于Html5获取用户当前位置的几种方式的文章就先容到这了,更多相干Html5获取用户当前位置内容请搜索脚本之家从前的文章或继续浏览下面的相干文章,渴望各人以后多多支持脚本之家!


来源:https://www.jb51.net/html5/804243.html
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
关闭

站长推荐上一条 /6 下一条

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-7-2 09:06 , Processed in 0.030953 second(s), 19 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

返回顶部