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弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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
基于文本的搜索
2006/10/09 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
函数式编程入门实践(一)
2019/04/20 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
python学习数据结构实例代码
2015/05/11 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python List cmp()知识点总结
2019/02/18 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
最新pycharm安装教程
2020/11/18 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
应聘护士自荐信
2013/10/21 职场文书
新闻专业应届生求职信
2013/10/31 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
2015年科室工作总结
2015/04/10 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python