html5定位
2015-09-26 14:59
706 查看
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">点击这个按钮,获得您的坐标:</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>ie下测试结果:
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">点击这个按钮,获得您的坐标:</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>ie下测试结果:
相关文章推荐
- html5元素拖拽效果
- 关于HTML5的拖拽
- 初探HTML5
- html5 canvas标签
- WebSocket: HTML5一种新的协议, 实现浏览器与服务器全 双工通信(full-duplex)
- html5中关于input用法
- HTML5 transform三维立方体(随着旋转的效果)
- HTML5: 下一代的 HTML
- html5 ajax Java接口 上传图片
- 2015 年最棒的 5 个 HTML5 框架-IT蓝豹 4000
- 基于silverlight或html5的大量图片展示系统
- 利用H5特性FormData实现不刷新文件上传
- 基于h5 ajax实现手机定位(demo)
- html5 实现video标签的自定义播放进度条
- 如何使用AEditor制作一个简单的H5交互页demo
- Solve the printer problem for H5-01、H3-00
- html5 视频播放 上传文件 控件
- XHTML5 ----- 表单验证(用户名、密码和email检测)
- html5常用新增标签
- XHTML5 ----- 拖拽事件 (拖拽一段文字和图片案例)