html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能。

地理位置定位基本原理
GPS, WIFI, IP, 手机信号基站

核心对象
Geolocation是window.navigator下面的一个对象,该对象提供了实现地理位置定位的接口。
要用该功能需先判断浏览器是否支持navigator.geolocation对象。

navigator.geolocation.getCurrentPosition(success, error, options);

success(position) 获取信息成功的回调函数
对象:

coords.latitude(十进制数的纬度)
coords.longitude(十进制数的经度)
coords.altitude(海拔,海平面以上以米计)
coords.accuracy(位置精确度)
coords.altitudeAccuracy(位置的海拔精度)
coords.heading(方向,从正北开始以度计)
coords.speed(速度,以米/每秒计)
timestamp(响应的日期/时间)

error(errorcode) 获取信息失败的回调函数

code是错误代码
message是错误信息

options设置配置参数,对象

enableHighAccuracy 表示是否允许使用高精度
timeout指定超时时间
maximumAge是指缓存的时间

geolocation还有两个方法:
1、watchPosition(success, error, options)表示重复获取地理位置,相当于不断执行getCurrentPosition。
2、clearWatch()用来清除前一次获取的位置信息。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body></body>
<script>
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log("纬度:" + position.coords.latitude);
console.log("经度:" + position.coords.longitude);
}, function(error) {
console.log(error.message);
}, {});
}
</script>
</html>

html5的地理位置定位的更多相关文章

  1. html5 Geolocation(地理位置定位)学习

    1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...

  2. HTML5获取地理位置定位信息

    如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...

  3. HTML5 地理位置定位(HTML5 Geolocation)原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  4. [Javascript] HTML5 地理位置定位(HTML5 Geolocation)原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  5. HTML5 地理位置定位API(3)

    HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...

  6. HTML5 地理位置定位API(1)

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  7. HTML5 地理位置定位API(5)

    HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...

  8. HTML5 地理位置定位API(2)

    HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...

  9. html5获取地理位置和定位

    1.H5地理位置定位功能 首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意 function getLocation(){ if (navigator.geol ...

随机推荐

  1. html页面跳转

    button <button onclick="window.location.href='edit.jsp'">完善个人信息</button> 单击提交表 ...

  2. 如何安装和配置RabbitMQ(转载)

    如何安装和配置RabbitMQ 今天开始一个小小的练习,学习一下安装和配置RabbitMQ,为什么要学它,因为WCF可以完全兼容和使用RabbitMQ了.我们新的大数据系统需要使用消息队列,所以就开始 ...

  3. 配置nginx实现windows/iis应用负载均衡(转载)

    配置nginx实现windows/iis应用负载均衡   nginx是俄罗斯人开发的一款跨平台的高性能HTTP和反向代理服务器,可以利用它实现web应用服务器的负载均衡. 反向代理是指将用户请求通过代 ...

  4. Windows常用命令实例

    熟练使用DOS常用命令有助于提高工作效率. 1.windows+R:打开运行程序窗口 2.cmd:调用DOS命令窗口 3.mstsc:调用远程桌面命令窗口.mstsc -v 192.168..0.1 ...

  5. kickstart自动安装部署RHEL7

    Kickstart是一种无人值守的安装方式.它的工作原理是在安装过程中记录典型的需要人工干预填写的各种参数,并生成一个 名为ks.cfg的文件.如果在安装过程中(不只局限于生成Kickstart安装文 ...

  6. ANg-基础概念

    分类 机器学习可以分为两类:监督学习(Supervised Learning)和无监督学习(Unsupervised Learning) 监督学习 Supervised Learning 监督学习是从 ...

  7. html中,纯数字或纯英文的一串字符超出父容器不会折行显示,如何解决?

    这种情况在软件使用过程中一般不会出现,只有测试人员在测试的时候手比较贱会给你弄一个这种数据,当然这也算是bug吧. 如图:“经营范围”的值严重超出父容器长度,并且没有像“服务信息”一样折行显示.这种情 ...

  8. shiro 会话管理

  9. [Android] Robotium手机自动化测试(仅需apk安装包版)——环境搭建 【转】

    Robotium的手机自动化测试,很多都是利用app源代码里的Id定义来开发自动化脚本.而在我开始要为项目中的app写自动化测试脚本的时 候,开发的环境还很不稳定,app也还处于开发的状态中,而且,在 ...

  10. js教程

    http://study.163.com/course/courseLearn.htm?courseId=1076006#/learn/video?lessonId=1290547&cours ...