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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
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
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python下10个简单实例代码
2017/11/15 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
西式婚礼主持词
2014/03/13 职场文书
捐助倡议书范文
2014/04/15 职场文书
学校教研活动总结
2014/07/02 职场文书
项目合作意向书模板
2014/07/29 职场文书
委托书范本
2014/09/13 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
档案接收函格式
2015/01/30 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL