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中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
Json解析的方法小结
Jun 22 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
5个实用的JavaScript新特性
Jun 16 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php连接mysql数据库代码
2009/03/10 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
Vue.js2.0中的变化小结
2017/10/24 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python中字符串前面加r的作用
2015/06/04 Python
python语言元素知识点详解
2019/05/15 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
大学生实习感言
2014/01/16 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
开服装店计划书
2014/08/15 职场文书
钱学森电影观后感
2015/06/04 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle