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的地址栏射击游戏代码
Mar 10 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
详解JS面向对象编程
Jan 24 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
javascript刷新父页面方法汇总详解
Oct 10 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
vue实现简单加法计算器
Oct 22 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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 mysql数据库操作分页类
2008/06/04 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
python学习之编写查询ip程序
2016/02/27 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python 伯努利分布详解
2020/02/25 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
装修设计师求职信
2014/02/26 职场文书
明信片寄语大全
2014/04/08 职场文书
铁路安全事故反思
2014/04/26 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
介绍信的格式
2015/01/30 职场文书
小学教研工作总结2015
2015/05/13 职场文书
庆七一活动简报
2015/07/20 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书