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强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
CSS变量实现主题切换的方法
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
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
python获取代理IP的实例分享
2018/05/07 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python实现事件驱动
2018/11/21 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
事业单位请假制度
2014/01/13 职场文书
《日月潭》教学反思
2014/02/28 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
家庭贫困证明
2014/09/23 职场文书