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实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 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
php csv操作类代码
2009/12/14 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
军训生自我鉴定范文
2013/12/27 职场文书
廉政教育心得体会
2014/01/01 职场文书
八年级生物教学反思
2014/01/22 职场文书
党支部承诺书范文
2014/03/28 职场文书
管理人员岗位职责
2015/02/14 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
四年级数学教学反思
2016/02/16 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python