Html5获取用户当前位置的方法

时间：2022-09-09 编辑：坚强来源：一聚教程网

今天小编为大家带来了Html5获取用户当前位置的方法，相信很多小伙伴都有这个疑问吧，今天就来解答你的疑问，感兴趣的小伙伴赶紧一起来学习学习吧！

一、使用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中引用)

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

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

总结
这样手机上就会有弹框提示获取位置啦，这个方法可以适用于微信浏览器和普通浏览器，基本没有问题，没有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('用户拒绝授权位置信息！');
        }
    })
})

总结

以上就是一聚教程网小编给大家带来的关于Html5获取用户当前位置的方法了，更多相关Html5获取用户当前位置方法请关注一聚教程网。

上一个： html中两种获取标签内的值的技巧
下一个： html网页引入svg图片的方法

推荐专题

最新下载

热门教程

Html5获取用户当前位置的方法

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

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

三、微信js-sdk自带的API

总结

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程