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的特性改变文本选中时的颜色
Sep 11 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
HTML基础详解(下)
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
PHP 彩色文字实现代码
2009/06/29 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
php中的异常和错误浅析
2017/05/03 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
jquery json 实例代码
2010/12/02 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
js重写方法的简单实现
2016/07/10 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
JavaScript实现职责链模式概述
2018/01/25 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
优秀学生事迹材料
2014/02/08 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
霸王洗发水广告词
2014/03/14 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
租车协议书范本2014
2014/11/17 职场文书
怎样写辞职信
2015/02/27 职场文书