首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
Web开发
> 详细
使用HTML5进行地理位置定位。误差在+-500m
时间:
2015-12-20 19:19:27
阅读:
221
评论:
0
收藏:
0
[点我收藏+]
标签:
XML/HTML Code
复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<
html
xmlns=
"http://www.w3.org/1999/xhtml"
xml:lang=
"en"
lang=
"en"
>
<
head
>
<
meta
http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<
title
>Geolocation 对象,Geolocation 与 Google Map 交互 ------ JS
Mix
</
title
>
</
head
>
<
body
>
<
input
type=
"button"
id=
"getPos"
value=
"获取我的位置"
>
<
div
id=
"info"
class=
""
>
您所在的位置: 经度
<
span
class=
"tip"
>unknown
</
span
>,纬度
<
span
class=
"tip"
>unknown
</
span
>
</
div
>
<
script
type=
"text/javascript"
>
var
t =
0;
var
dom = {
btn : document.getElementById(‘getPos‘),
info : document.getElementById(‘info‘)
};
dom.btn.onclick =
function(){
if (navigator.geolocation) {
dom.info.innerHTML =
"请等待查询结果返回";
dom.info.className =
"warn";
navigator.geolocation.getCurrentPosition(getPositionSuccess,getPositionError,{timeout:5000});
}else {
dom.info.innerHTML =
"抱歉,您所使用的
浏览器
不支持 Geolocation 接口";
dom.info.className =
"warn";
}
}
function getPositionSuccess(position){
var
lat =
position.coords.latitude;
var
lng =
position.coords.longitude;
dom.info.innerHTML =
"您所在的位置: 经度" + lat + ",纬度" + lng;
if(typeof
position.address === "undefined"){
dom.info.innerHTML += "
<
br
/>
<
span
class=
‘tip‘
>您的浏览器目前仅提供坐标查询,使用 Firefox 3.5+ 可获得更多信息
</
span
>";
}else{
dom.info.innerHTML += "
<
br
/>
<
span
class=
‘tip‘
>" + position.address.country + " , " + position.address.region + " , " + position.address.city+"
</
span
>";
}
}
function getPositionError(error){
switch(error.code){
case error.TIMEOUT :
dom.info.innerHTML =
"连接超时,请重试";
break;
case error.PERMISSION_DENIED :
dom.info.innerHTML =
"您拒绝了使用位置共享服务,查询已取消";
break;
case error.POSITION_UNAVAILABLE :
dom.info.innerHTML =
"亲爱的火星网友,非常抱歉<br />我们暂时无法为您所在的星球提供位置服务";
break;
}
}
</
script
>
</
body
>
</
html
>
使用HTML5进行地理位置定位。误差在+-500m
标签:
原文地址:http://www.cnblogs.com/jiaze/p/5061542.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
36.VUE — 认识 Webpack 和 安装
2021-07-28
【PHP】上传图片翻转问题
2021-07-28
php对数字进行万。亿的转化
2021-07-28
五个 .NET 性能小贴士
2021-07-28
Three.js中显示坐标轴、平面、球体、四方体
2021-07-28
.net 5+ 知新:【1】 .Net 5 基本概念和开发环境搭建
2021-07-27
1.html,css
2021-07-27
基于Docker搭建 Php-fpm + Nginx 环境
2021-07-27
nginx + http + svn
2021-07-27
kubernets kube-proxy的代理 iptables和ipvs
2021-07-26
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!