HTML5怎么实现地理定位

发布时间:2021-07-29 23:28:17 作者:chen
来源:亿速云 阅读:146

这篇文章主要介绍“HTML5怎么实现地理定位”,在日常操作中,相信很多人在HTML5怎么实现地理定位问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5怎么实现地理定位”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

本文实例讲述了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怎么实现地理定位”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. HTML5如何使用地理定位
  2. HTML5之地理定位(二)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:html5版canvas自由拼图实例介绍

下一篇:怎么用CSS background 控制显示图片的一部分

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》