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发光搜索表单分享
Apr 11 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 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
使用无限生命期Session的方法
2006/10/09 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
PHP实现简单登录界面
2019/10/23 PHP
JavaScript之自定义类型
2012/05/04 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python中字符串的处理技巧分享
2016/09/17 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python 字典套字典或列表的示例
2019/12/16 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
应届生程序员求职信
2013/11/05 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
投诉信范文
2015/07/02 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript