JavaScript地理位置信息API

 更新时间:2016年06月11日 12:40:34   投稿:lijiao  
这篇文章主要介绍了JavaScript地理位置信息API的相关资料,需要的朋友可以参考下

对于一个Web开发程序员来说,开发工作中一个最有意思的方面就是获取地理位置信息;试想一下,浏览你的网页的用户是在什么地方?程序员可以根据用户的地理位置信息来调整网站的语言、特定产品介绍等。下面我们将要演示的就是通过浏览器里JavaScript地理位置信息API来获取详细地理信息!

检查你的浏览器是否支持地理位置信息API

目前主流的浏览器都已经对JavaScript地理位置信息API有了较好的支持。但如果你还不放心,那么,确认地理位置信息API支持情况最好的方式是浏览器的功能特征测试。

if("geolocation" in navigator) {
 //w00t!
}
else {
 alert("很不幸!你的浏览器并不支持Geolocation API功能");
}

对于判断浏览器是否支持地理位置API,最主要的就是看看navigator.geolocation这个对象,使用in,而不是简单的使用if(navigator.geolocation),这一点非常重要,因为后者有可能会因此初始化地理位置信息对象,从而占用/锁定了设备资源。

查询地理位置信息

这个navigator.geolocation.getCurrentPosition方法是获取详细位置信息最关键的一个接口:

if("geolocation" in navigator) {
 navigator.geolocation.getCurrentPosition(function(position) {
 console.log(position);
 });
}

一旦你调用了这个方法(如果请求成功,它会执行你在参数里提供的回调方法),浏览器会询问用户是否允许程序获取他们的地理位置信息。

当用户运行网页获取他们的位置信息后,浏览器就可以开始读取地理信息,它会返回给你一个位置信息对象,对象的结构基本是这样的:

// "Position" object
{
 coords: { "Coordinates" object
 accuracy: 65,
 altitude: 294.4074401855469,
 altitudeAccuracy: 10,
 heading: -1,
 latitude: 43.01256284360166,
 longitude: -89.44531987692744,
 speed: -1
 },

 timestamp: 1429722992094269
}

如果你觉得这些地理位置信息(地理经纬度坐标)还不够充足,还想要这些地理坐标属于哪个国家、城市,则你需要再调用其它的第三方数据库——这里我们就不细述了。
这个地理位置信息API在很多移动应用里是最常见的API运用,作为Web程序员,它应该是你必须具备的一项知识技巧。幸运的是,目前所有流行的浏览器都支持了这种技术。

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

相关文章

  • 微信小程序媒体组件详解(视频,音乐,图片)

    微信小程序媒体组件详解(视频,音乐,图片)

    这篇文章主要为大家详细介绍了微信小程序媒体组件的相关资料,包括视频,音乐,图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JS实现的全排列组合算法示例

    JS实现的全排列组合算法示例

    这篇文章主要介绍了JS实现的全排列组合算法,简单描述了全排列组合算法的原理并结合实例形式给出了全排列组合算法的具体实现技巧,需要的朋友可以参考下
    2017-10-10
  • 基于javascript处理nginx请求过程详解

    基于javascript处理nginx请求过程详解

    这篇文章主要介绍了基于javascript处理nginx请求过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • js实现图片切割功能

    js实现图片切割功能

    这篇文章主要为大家详细介绍了js实现图片切割功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript实现简单的星星评分效果

    JavaScript实现简单的星星评分效果

    这篇文章主要为大家详细介绍了JavaScript实现简单的星星评分效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • layui+SSM的数据表的增删改实例(利用弹框添加、修改)

    layui+SSM的数据表的增删改实例(利用弹框添加、修改)

    今天小编就为大家分享一篇layui+SSM的数据表的增删改实例(利用弹框添加、修改),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 疯掉了,尽然有js写的操作系统

    疯掉了,尽然有js写的操作系统

    疯掉了,尽然有js写的操作系统...
    2007-04-04
  • D3.js实现文本的换行详解

    D3.js实现文本的换行详解

    相信大家都知道在SVG中添加文本是使用text元素。但这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢?下面通过这篇文章来给大家详细介绍下实现的过程。
    2016-10-10
  • web项目开发之JS函数防抖与节流示例代码

    web项目开发之JS函数防抖与节流示例代码

    这篇文章主要介绍了web项目开发之JS函数防抖与节流实现的示例代码及原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-09-09
  • Javascript优化技巧之短路表达式详细介绍

    Javascript优化技巧之短路表达式详细介绍

    这篇文章主要介绍了Javascript优化技巧之短路表达式详细介绍,本文讲解了什么是短路表达式,并给出了一些示例,需要的朋友可以参考下
    2015-03-03

最新评论