利用html5 共享地理位置

该例子是演示利用HTML5实现地理定位。也就是获得本机IP地址，然后判断出所在位置，并且显示在Google地图上。。

实例效果图

该实例预览地址：http://html5demos.com/geo

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5. <meta name="viewport" content="width=620" />
  6. <title>HTML5 Demo: geolocation</title>
  7. <style>
  8. body {
  9. font: normal 16px/20px Helvetica, sans-serif;
  10. background: rgb(237, 237, 236);
  11. margin: 0;
  12. margin-top: 40px;
  13. padding: 0;
  14. }
  15. section, header, footer {
  16. display: block;
  17. }
  18. #wrapper {
  19. width: 600px;
  20. margin: 0 auto;
  21. background: #fff url(images/shade.jpg) repeat-x center bottom;
  22. -moz-border-radius: 10px;
  23. -webkit-border-radius: 10px;
  24. border-top: 1px solid #fff;
  25. padding-bottom: 76px;
  26. }
  27. h1 {
  28. padding-top: 10px;
  29. }
  30. h2 {
  31. font-size: 100%;
  32. font-style: italic;
  33. }
  34. header, article > *, footer > * {
  35. margin: 20px;
  36. }
  37. footer > * {
  38. margin: 20px;
  39. color: #999;
  40. }
  41. #status {
  42. padding: 5px;
  43. color: #fff;
  44. background: #ccc;
  45. }
  46. #status.fail {
  47. background: #c00;
  48. }
  49. #status.success {
  50. background: #0c0;
  51. }
  52. </style>
  53. <script src="h5utils.js"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  54. </head>
  55. <body>
  56. <section id="wrapper">
  57. <header>
  58. <h1>Geolocation</h1>
  59. </header>
  60. <article>
  61. <p>Finding your location: <span id="status">checking…</span></p>
  62. </article>
  63. <footer><a href=http://www.houoop.com/%3Cspan class="str">"/">HTML5 demo</a></footer>
  64. </section>
  65. <script>
  66. function success(position) {
  67. var s = document.querySelector(‘#status‘);
  68. if (s.className == ‘success‘) {
  69. // not sure why we‘re hitting this twice in FF, I think it‘s to do with a cached result coming back
  70. return; }
  71. s.innerHTML = "found you!";
  72. s.className = ‘success‘;
  73. var mapcanvas = document.createElement(‘div‘);
  74. mapcanvas.id = ‘mapcanvas‘;
  75. mapcanvas.style.height = ‘400px‘;
  76. mapcanvas.style.width = ‘100%‘;
  77. document.querySelector(‘article‘).appendChild(mapcanvas);
  78. var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  79. var myOptions = {
  80. zoom: 15, center: latlng,
  81. mapTypeControl: false,
  82. navigationControlOptions: {
  83. style: google.maps.NavigationControlStyle.SMALL
  84. },
  85. mapTypeId: google.maps.MapTypeId.ROADMAP };
  86. var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  87. var marker = new google.maps.Marker({ position: latlng, map: map, title:"You are here!" });
  88. }
  89. function error(msg) {
  90. var s = document.querySelector(‘#status‘);
  91. s.innerHTML = typeof msg == ‘string‘ ? msg : "failed";
  92. s.className = ‘fail‘;
  93. // console.log(arguments);
  94. } if (navigator.geolocation) {
  95. navigator.geolocation.getCurrentPosition(success, error);
  96. } else {
  97. error(‘not supported‘);
  98. }
  99. </script>
  100. </body>
  101. </html>

时间： 2024-10-14 16:49:55

利用html5 共享地理位置的相关文章

利用HTML5技术在Web上实现对图形图像的处理——WebPhotoshop精简版

WebPhotoshop精简版是利用HTML5技术在Web上实现对图形图像的处理,构建易维护.易共享.易于拓展.实时性的Web图形图像处理平台. 精简版功能包括:图形绘制.图像处理.图像操作.完整版包括多人协作操作图像.实时交流.图片搜索,同时实现实时的多人协作处理图形图像技术.(完整版后续上传)一.功能说明:1.图形绘制 实现铅笔.画笔(书法画笔.喷枪.蜡笔.记号笔.水彩画笔)的绘制效果.实现直线.曲线.椭圆(圆).矩形(圆角矩形).三角形(直角三角形.等边三角形.任意三角形).多边形的绘制.

HTML5之地理位置

1.ip地址 书上说不准确,很多时候获取的是ISP机房的位置,但是获取非常方便,没有什么限制.但是实际上我觉得在中国,ip地址还是比较准确的,基本上上能精确到小区或大楼的标准. 2.GPS 非常准确,但是需要在户外,且需要很长时间搜索卫星.最主要的很多设备比如笔记本电脑基本都是不带GPS的,新的智能手机purse hanger倒是都有. 3.WiFi基站的mac地址. (猜测是连接位置已知的公共WiFi的时候,通过Mac地址识别WiFi接入点,从而定位) 这种定位的精度还是很不错的,而且还可以在

利用HTML5定位功能，实现在百度地图上定位

利用HTML5定位功能,实现在百度地图上定位 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>HTML5定位</title>     <script type="text/javascript" src="http://lib.sinaapp

一个利用HTML5 localStorage功能的todo应用(angularJs+Bootstrap)

今天在网上看到一个简单的todo应用,使用angularJs做前端数据绑定,利用localStorage来存储数据,觉得挺有意思的. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="todoApp"> <head> <me

利用html5的本地存储写的一个购物车

好久没有写博客园了,很多知识没有记录下来:可惜: 这几天在开发微信,也写了一个订餐平台的微网站,里面需要写一个购物车: 这里主要是把商品的部分信息以json格式保存在sessionstorage中,还有商店信息也是: 以json格式保存有什么好处呢,轻量级的传输,大概是这样吧!另外,如果我们把商品信息分开存储,就会导致有多条的sessionstorage项,那以后实现在两家商店同时购物的话,就不可能区分每家商店的商品了: 如果代码是自己写的,就有版权,这么说.对吧,是在软件工程师书上看到的: 不

[HTML5_WebWorkers]利用HTML5的window.postMessage实现跨域通信

由于同源策略的限制,JavaScript跨域的问题,一直是一个颇为棘手的问题,为了解决js的跨域,web开发人员是煞费苦心,研究了各种跨域方案,如果有机会的话,明河以后会一一展示给各位,今天明河重点介绍下html5新引入的postMessage跨域方案. 1.哪些场景要考虑跨域问题? 明河这二周在处理淘宝添加收藏夹的重构,里面就有一个非常经典的跨域问题.添加收藏弹出层外层是淘宝商城页面域名是tmall.com,而弹出层内部的页面域名却是taobao.com,接下来的问题就是我现在希望弹出层内部的

HTML5获取地理位置

HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Internet Explorer 9.0+ 手机支持情况: Android 2.0+iPhone 3.0+Opera Mobile 10.1+Symbian (S60 3rd & 5th generation)Blackberry OS 6Maemo 检测浏览器是否支持: if (navigator.geol

利用html5的本地存储功能实现登录用户信息保存

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. 用户名.密码保存,自动登录等,可以通过设置cookie实现,第一次登录网站后在本地计算机的中写入cookie,之后再次登录此网站查看cookie中现有的值,用cookie值进行网站登录即可.但是 cookie 不适合大量数据

利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javascript: [javascript] view plaincopy var SHAKE_THRESHOLD = 3000; var last_update = 0;