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.0 图形构成实例练习二
Mar 19 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
使javascript也能包含文件
2006/10/26 Javascript
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
JavaScript对象模型-执行模型
2008/04/28 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
Python中subprocess模块用法实例详解
2015/05/20 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python程序如何进行保存
2020/07/03 Python
Python库安装速度过慢解决方案
2020/07/14 Python
英语专业毕业生自荐信范文
2013/12/31 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
青年文明号复核材料
2014/02/11 职场文书
教师自我鉴定范文
2014/03/20 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
元旦晚会活动总结
2014/07/09 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android