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实现DIV圆角效果完整代码
Oct 10 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 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
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JavaScript中this详解
2015/09/01 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
js实现简单的打印表格
2020/01/15 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
Python比较两个图片相似度的方法
2015/03/13 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python实现句子翻译功能
2017/11/14 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
详解python中各种文件打开模式
2020/01/19 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python3开发环境搭建详细教程
2020/06/18 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
异步传递消息系统的作用
2016/05/01 面试题
詹天佑教学反思
2014/04/30 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
西双版纳导游词
2015/02/03 职场文书
地震捐款简报
2015/07/21 职场文书
Python Socket编程详解
2021/04/25 Python
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript