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 简单又实用的5个属性
Mar 04 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 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自定义urlencode,urldecode函数实例
2015/03/24 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
javascript关于继承解析
2016/05/10 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
中文专业毕业生自荐信
2013/10/28 职场文书
应届生会计求职信
2013/11/11 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
公司授权委托书范文
2014/09/21 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python