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 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 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
使用adodb lite解决问题
2006/12/31 PHP
PHP insert语法详解
2008/06/07 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
js 深拷贝函数
2008/12/04 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python实现多线程网页下载器
2018/04/15 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
2014学雷锋活动心得体会
2014/03/10 职场文书
国庆节慰问信
2015/02/15 职场文书