HTML5学习笔记 Geolocation(地理定位)
HTML5 Geolocation(地理定位)用于定位用户的位置。
定位用户的位置
html5 Geolocation API用于获得用户的地理位置
鉴于该特性可能低侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

HTML5 -使用地理定位
请使用getCurrentPositon()方法来获得用户的位置
下例是一个简单的地理定位的实例,可返回用户位置的纬度和纬度
直接上代码吧:
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
实例解析:
检测是否支持地理定位
如果支持,则运行getCurrentPosition()方法。如果不支持,则几用户显示一段消息。
如果getCuurentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
showPostion()函数获取并显示经度和纬度
处理错误和拒绝
getCurrentPosition()方法的第二个参数用于处理错误,它规定当获取用户位置失败时运行的函数:
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
Geolocation对象-其他有趣的方法
catchPosition()-返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车的GPS)
clearWatch()-停止watchPosition()方法
下面的例子展示watchPosition()方法,您需要一台精确的GPS设置来测试该例
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
本节完
HTML5学习笔记 Geolocation(地理定位)的更多相关文章
- HTML5学习总结-03 地理定位
一 地理定位 HTML5 Geolocation(地理定位)用于定位用户的位置. 1 地理定位 地理位置 经度 : 南北极的连接线 纬度 : 东西连接的线 位置信息从何而来: IP地址 G ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- ArcGIS案例学习笔记3_1_地理配准案例_目视找点
ArcGIS案例学习笔记3_1_地理配准案例_目视找点 计划时间:第3天上午 方法:地理配准/添加链接点/左键/右键/输入坐标 数据:江苏省.zip 矢量:省界,市界,GPS WGS84 地理坐标系 ...
- ArcGIS案例学习笔记3_1_地理配准案例_图面控制点
ArcGIS案例学习笔记3_1_地理配准案例_图面控制点 计划时间:第3天上午 目的:地形图控制点配准 数据:地形图drg 无坐标: 步骤 1.查看地图标注 2. 地理配准,添加控制点 3.结果: 联 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- HTML5 学习06——Geolocation(地理定位)
HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签!
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
随机推荐
- Java常量定义需要注意的两点
在任何开发语言中,都需要定义常量.在Java开发语言平台中也不例外.不过在Java常量定义的时候,跟其他语言有所不同.其有自己的特色.在这篇文章中,主要针对Java语言中定义常量的注意事项进行解析,帮 ...
- SQL Server性能调优:资源管理之内存管理篇(上)
http://www.cnblogs.com/caspnet/archive/2011/02/21/1959539.html 对SQL Server来说,最重要的资源是内存.Disk和CPU,其中内存 ...
- 狗日的rem
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- 【ajax 提交表单】多种方式的注意事项 ,serialize()的使用
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
- cocos2dx 3.0研究(1)-- hello world程序
1. 在mac上构建hello world很easy ./setup.py source /Users/jiangxf/.bash_profile cocos new AliGame -p com.m ...
- 高级需求分析UML建模设计模式笔记
1.REQ->HLR 分析 全系统性质->AD设计 Context,BOM,Conception 2.REQ->LLR 分析 模块分析->DD设计 + 编码 Feature,B ...
- iOS开发之UITextField 左侧设置小图标 leftview
设置用户登录的时候,这个是避免不了,实现方法很多,我个人主张,系统有提供就使用系统,一来方便,二来运行效率高 Paste_Image.png 实现代码如下: pwdTextField.placehol ...
- sqlserver锁大全
锁定提示 描述 HOLDLOCK 将共享锁保留到事务完成,而不是在相应的表.行或数据页不再需要时就立即释放锁.HOLDL ...
- [Gradle] Gradle 简介
Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动化构建工具. Ø gradle对多工程的构建支持很出色,工程依赖是gradle的第一公民. Ø ...
- udp_client.c udp_server.c
#include <stdlib.h> #include <stdio.h> #include <errno.h> #include <string.h> ...