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 相关文章推荐
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
Javascript window对象详解
Nov 12 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
拖动时防止选中
Feb 03 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
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 mssql 数据库分页SQL语句
2008/12/16 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python星号*与**用法分析
2018/02/02 Python
python list元素为tuple时的排序方法
2018/04/18 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
如何在Django项目中引入静态文件
2019/07/26 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
详解Django配置优化方法
2019/11/18 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
金属材料工程个人求职的自我评价
2013/12/04 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
公司地址变更通知
2015/04/25 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis