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 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
一个PHP的String类代码
2010/04/20 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
Smarty模板语法详解
2019/07/20 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python flask 多对多表查询功能
2017/06/25 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python之语音识别speech模块
2020/09/09 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
AJax面试题
2014/11/25 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
工程师岗位职责规定
2014/02/26 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
党员公开承诺事项
2014/03/25 职场文书
环境建议书
2015/02/04 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
Python绘画好看的星空图
2022/03/17 Python