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 相关文章推荐
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP如何抛出异常处理错误
2011/03/02 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
es6数值的扩展方法
2019/03/11 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
本科毕业生求职信
2014/06/15 职场文书
运动会演讲稿200字
2014/08/25 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
教师节表彰会主持词
2015/07/06 职场文书
升学宴家长致辞
2015/07/27 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis