HTML5地理定位实例


Posted in HTML / CSS onOctober 15, 2014

本文实例讲述了html5获取地理定位的方法,分享给大家供大家参考。具体方法如下:

html5 获取坐标代码如下:

复制代码
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>test1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div id="demo">点击这个按钮,获得您的坐标:</div>
<button onclick="getLocation()">试一下</button>
<script type="text/javascript">

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>

</body>
</html>

经测试,在IE9 、firefox、chrome、opera上都可以成功获取到坐标位置,但是safari 5.x上却不能返回坐标,暂时木有找到原因。成功的案例里头,chrome响应的速度最快,其次是opera,然后是IE9,firefox居然是最慢的。个人表示对firefox很失望,不过chrome倒是越来棒了。

希望本文所述对大家的HTML5程序设计有所帮助。

HTML / CSS 相关文章推荐
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 #HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 #HTML / CSS
HTML5 video 事件应用示例
Sep 11 #HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 #HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 #HTML / CSS
html5中的input新属性range使用记录
Sep 05 #HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 #HTML / CSS
You might like
php+dbfile开发小型留言本
2006/10/09 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
日语求职信范文
2013/12/17 职场文书
小学教师培训感言
2014/02/11 职场文书
民事和解协议书格式
2014/11/29 职场文书
感恩的心主题班会
2015/08/12 职场文书
教师远程培训心得体会
2016/01/09 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Python实现双向链表基本操作
2022/05/25 Python