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实现字体颜色渐变的实现
Mar 09 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 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循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
Jquery ui css framework
2010/06/28 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python设计模式之单例模式实例
2014/04/26 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python中类的初始化特殊方法
2017/12/01 Python
python sys.argv[]用法实例详解
2018/05/25 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Django实现学生管理系统
2019/02/26 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python中字符串与编码示例代码
2019/05/20 Python
python操作文件的参数整理
2019/06/11 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Django中modelform组件实例用法总结
2020/02/10 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
学生实习介绍信
2014/01/15 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
2014年计生工作总结
2014/11/21 职场文书
2015年安全月活动总结
2015/03/26 职场文书