JavaScript地理位置信息API


Posted in Javascript onJune 11, 2016

对于一个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程序设计有所帮助。

Javascript 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
js自定义事件代码说明
Jan 31 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
javascript的BOM汇总
Jul 16 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery自定义数值抽奖活动代码
Jun 11 #Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 #Javascript
javaScript知识点总结(必看篇)
Jun 10 #Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 #Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 #Javascript
老生常谈JavaScript数组的用法
Jun 10 #Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 #Javascript
You might like
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
Java如何格式化日期
2012/08/07 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
2014年自愿离婚协议书
2014/10/10 职场文书
同意落户证明
2015/06/19 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang