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


Posted in HTML / CSS onJanuary 18, 2022

前言

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

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

先使用navigator.geolocation判断浏览器是否支持,如果不支持就提示或者使用其他方法。

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

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

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

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

<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>

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

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

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

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

三、微信js-sdk自带的API

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

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

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

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

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

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('用户拒绝授权位置信息!');
        }
    })
})

总结

一共列举的三种H5获取地理位置的方式,如果不是在公众号中非必要的情况下还是比较推荐使用类似百度地图这样的第三方获取,比较方便,并且百试百灵,一开始不想用第三方的东西就打算用H5自带的API弄了好久试了好多个手机和浏览器都没成功,真是心碎。

到此这篇关于Html5获取用户当前位置的几种方式的文章就介绍到这了,更多相关Html5获取用户当前位置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
html粘性页脚的具体使用
Jan 18 #HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 #HTML / CSS
使用CSS设置滚动条样式
在CSS中使用when/else的方法
Jan 18 #HTML / CSS
CSS使用伪类控制边框长度的方法
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
You might like
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python学习必备知识汇总
2017/09/08 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python内置类型性能分析过程实例
2020/01/29 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
文明村镇申报材料
2014/05/06 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
数学备课组工作总结
2015/08/12 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python