DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> html5地理定位
html5地理定位
編輯：HTML5詳解     

該例子是演示利用Html5實現地理定位。也就是獲得本機IP地址，然後判斷出所在位置，並且顯示在Google地圖上。。

實例效果圖：
 

HTML5地理定位
HTML5地理定位

 該實例預覽地址：http://Html5demos.com/geo

實例代碼：
  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.  
  16. section, header, footer {  
  17.   display: block;  
  18. }  
  19.  
  20. #wrapper {  
  21.   width: 600px;  
  22.   margin: 0 auto;  
  23.   background: #fff url(images/shade.jpg) repeat-x center bottom;  
  24.   -moz-border-radius: 10px;  
  25.   -webkit-border-radius: 10px;  
  26.   border-top: 1px solid #fff;  
  27.   padding-bottom: 76px;  
  28. }  
  29.  
  30. h1 {  
  31.   padding-top: 10px;  
  32. }  
  33.  
  34. h2 {  
  35.   font-size: 100%;  
  36.   font-style: italic;  
  37. }  
  38.  
  39. header,  
  40. article > *,  
  41. footer > * {  
  42.   margin: 20px;  
  43. }  
  44.  
  45. footer > * {  
  46.   margin: 20px;  
  47.   color: #999;  
  48. }  
  49.  
  50. #status {  
  51.   padding: 5px;  
  52.   color: #fff;  
  53.   background: #ccc;  
  54. }  
  55.  
  56. #status.fail {  
  57.   background: #c00;  
  58. }  
  59.  
  60. #status.success {  
  61.   background: #0c0;  
  62. }  
  63.  
  64.  
  65. </style> 
  66. <script src="h5utils.JS"></script> 
  67. <script type="text/Javascript" src="http://maps.google.com/maps/api/JS?sensor=false"></script> 
  68. </head> 
  69. <body> 
  70. <section id="wrapper"> 
  71.     <header> 
  72.  
  73.       <h1>Geolocation</h1> 
  74.     </header> 
  75.     <article> 
  76.       <p>Finding your location: <span id="status">checking...</span></p> 
  77.     </article> 
  78.     <footer><a href="/">Html5 demo</a></footer> 
  79. </section> 
  80.  
  81. <script> 
  82. function success(position) {  
  83.   var s = document.querySelector('#status');  
  84.     
  85.   if (s.className == 'success') {  
  86.     // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back      
  87.     return;  
  88.   }  
  89.     
  90.   s.innerHtml = "found you!";  
  91.   s.className = 'success';  
  92.     
  93.   var mapcanvas = document.createElement('div');  
  94.   mapcanvas.id = 'mapcanvas';  
  95.   mapcanvas.style.height = '400px';  
  96.   mapcanvas.style.width = '100%';  
  97.       
  98.   document.querySelector('article').appendChild(mapcanvas);  
  99.     
  100.   var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);  
  101.   var myOptions = {  
  102.     zoom: 15,  
  103.     center: latlng,  
  104.     mapTypeControl: false,  
  105.     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},  
  106.     mapTypeId: google.maps.MapTypeId.ROADMAP  
  107.   };  
  108.   var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);  
  109.     
  110.   var marker = new google.maps.Marker({  
  111.       position: latlng,   
  112.       map: map,   
  113.       title:"You are here!"  
  114.   });  
  115. }  
  116.  
  117. function error(msg) {  
  118.   var s = document.querySelector('#status');  
  119.   s.innerHtml = typeof msg == 'string' ? msg : "failed";  
  120.   s.className = 'fail';  
  121.     
  122.   // console.log(arguments);  
  123. }  
  124.  
  125. if (navigator.geolocation) {  
  126.   navigator.geolocation.getCurrentPosition(success, error);  
  127. } else {  
  128.   error('not supported');  
  129. }  
  130.  
  131.  
  132. </script> 
  133. <script> 
  134. var gaJSHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");  
  135. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.JS' type='text/Javascript'%3E%3C/script%3E"));  
  136. </script> 
  137. <script> 
  138. try {  
  139. var pageTracker = _gat._getTracker("UA-1656750-18");  
  140. pageTracker._trackPagevIEw();  
  141. } catch(err) {}</script> 
  142. </body> 
  143. </Html> 

 

HTML5詳解
html5使用canvas實現跟隨光標跳動的火焰效果
本效果的完整代碼如下,把代碼保存到Html文件中打開也能查看效果,火焰會跟隨光標:復制代碼代碼如下
仿酷狗html5手機音樂播放器主要部分代碼
Html5作品，經測試，效果確定不錯，遺憾的是只支持谷歌和蘋果等以webkit核心的浏覽器，網友體
HTML5 預加載讓頁面得以快速呈現
浏覽器廠商和開發者之間共同努力的一個方向就是讓網站更快。現在已有很多廣為人知的加速解決方案：CSS

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
html5 自定義播放器核心代碼 HTML5 Canvas draw方法制作動畫效果示例 關於display: box 和 box-flex 多視角3D逼真HTML5水波動畫 HTML5中div、article、section的區別及使用介紹 利用HTML5中Geolocation獲取地理位置調用Google Map API在Google Map上定位 使用元件 使用 iscroll 實現焦點圖無限循環 html5 Web開發：防止浏覽器假死的方法 HTML5是否已為實際應用做好准備？
熱門推薦
如何使用HTML5實現拍照上傳應用 HTML5+lufylegend實現游戲中的卷軸 HTML5拖拽文件到浏覽器並實現文件上傳下載功能代碼 HTML5或顛覆Web傳統模式 html5 canvas-2.用canvas制作一個猜字母的小游戲 html5 canvas RPG游戲效率探索. html5中JavaScript removeChild 刪除所有節點 html5定位並在百度地圖上顯示的示例 HTML5 Canvas draw方法制作動畫效果示例
大家都在看
Css樣式兼容IE6,IE7,FIREFOX的浏覽器的寫法示例介紹 javascript實現Table排序的方法 用戶體驗:網站確認頁面以何種形式表現 說說當程序員的個人經驗 某人初學javascript的時候寫的學習筆記 jQuery中關於ScrollableGridPlugin.js（固定表頭）插件的使用逐步解析 Ajax在進行web開發中的安全性分析 XSL基礎教程第一章
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved