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被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
随机推荐
- JavaScript Diagramming
JavaScript Diagramming Optensity
- redis+spring配置
pom引入jedis的jar包 <dependency> <groupId>redis.clients</groupId> <artifactId>je ...
- webBrowser捕获Alert内容(C#)
1.引用using mshtml; //Microsoft HTML Object Library2.[ComVisible(true)] //放到类的上边 public partial class ...
- poj 3264 Balanced Lineup 题解
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Subm ...
- #include <NOIP2008 Junior> 双栈排序 ——using namespace wxl;
题目描述 Tom最近在研究一个有趣的排序问题.如图所示,通过2个栈S1和S2,Tom希望借助以下4种操作实现将输入序列升序排序. 操作a 如果输入序列不为空,将第一个元素压入栈S1 操作b 如果栈S1 ...
- vmwareubuntu18.04网络配置
用vm安装ubuntu的时候要如果使用的是net模式,要确保vm的net服务和dhcp服务开启了,右键我的电脑-管理-服务和应用程序-服务找到对应的vm net服务和dhcp服务启动.
- C#视频播放器【转】
1对于视频播放器来说,最重要的功能,莫过于播放视频文件了这就要用到VS自带的控件——Windows Media Player windows media player 将Windows Media P ...
- C++如何禁止掉对象的复制操作
最容易想到的是将拷贝构造函数与赋值函数声明为private.但是,private只是说外部不能直接调用,但是可以间接通过类的成员函数与友元函数对其访问.那么怎么办呢? ---->在类中,允许声明 ...
- JavaWeb学习笔记:ServletConfig()和ServletContext()
ServletConfig()和ServletContext() 1.ServletConfig() ServletConfig是一个接口,它由server提供商来实现. ServletConfig封 ...
- 【转】js-ES6学习笔记-Symbol
原文:https://www.cnblogs.com/zczhangcui/p/6435652.html https://blog.mgechev.com/2017/09/16/developing- ...