91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

調用googleMapApi

發布時間：2020-05-31 07:22:11 來源：網絡 閱讀：522 作者：起始頁 欄目：移動開發

 基本調用

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
  5. <style type="text/css"> 
  6.   html { height: 100% } 
  7.   body { height: 100%; margin: 0px; padding: 0px } 
  8.   #map_canvas { height: 100% } 
  9. </style> 
  10. <script type="text/javascript" 
  11.     src="https://maps.google.com/maps/api/js?sensor=true"> 
  12. </script> 
  13. <script type="text/javascript"> 
  14.   function initialize() { 
  15.     var latlng = new google.maps.LatLng(-34.397, 150.644); 
  16.     var myOptions = { 
  17.       zoom: 8, 
  18.       center: latlng, 
  19.       mapTypeId: google.maps.MapTypeId.ROADMAP 
  20.     }; 
  21.     var map = new google.maps.Map(document.getElementById("map_canvas"), 
  22.         myOptions); 
  23.   } 
  24.  
  25. </script> 
  26. </head> 
  27. <body onload="initialize()"> 
  28.   <div id="map_canvas" style="width:100%; height:100%"></div> 
  29. </body> 
  30. </html> 

基于html5的稍微復雜的Goolge Map 調用

 

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
  6. <style type="text/css"> 
  7.   html { height:800px; width:480px; } 
  8.   body { height: 100%; margin: 0px; padding: 0px } 
  9.   #map_canvas { height: 100% } 
  10.   #metaDataTable { position:absolute; top:30px; left:0px; z-index:1000;} 
  11. </style> 
  12. <title>html5_Geolocation</title> 
  13. <script type="text/javascript" 
  14.     src="https://maps.google.com/maps/api/js?sensor=false"> 
  15. </script> 
  16.  
  17. </head> 
  18.  
  19. <body> 
  20. <div id="metaDataTable"> 
  21.  <h2> Html5 Geolocation Distance Tracker</h2> 
  22.  <p id="status"> Html5 Geolocation is<strong> not</strong> suppert your browser!!!</p> 
  23. <h3>Current Position:</h3> 
  24. <table border="1"> 
  25.      <tr> 
  26.         <td width=40 scope="col">緯度</td> 
  27.         <td wisth=114 id="latitude">?</td> 
  28.      </tr> 
  29.      <tr> 
  30.         <td width=40 scope="col">經度</td> 
  31.         <td wisth=114 id="longitude">?</td> 
  32.      </tr> 
  33.       <tr> 
  34.         <td width=40 scope="col">海拔</td> 
  35.         <td wisth=114 id="accuracy">?</td> 
  36.      </tr> 
  37.        <tr> 
  38.         <td width=40 scope="col">Last TimeStamp</td> 
  39.         <td wisth=114 id="timestamp">?</td> 
  40.      </tr> 
  41. </table> 
  42. <h5 id="currDist"> Current distance traveled:0.0KM</h5> 
  43. <h5 id="totalDist">Total distance traveled:0.0KM</h5> 
  44. </div> 
  45. <script> 
  46.       var totalDistance = 0.0; 
  47.       var lastLat; 
  48.       var lastLong; 
  49.       var latitude; 
  50.       var longitude; 
  51. /*function getGeolacation(){ 
  52.     if(navigator.geolocation){ 
  53.         alert("Support the html5 Geolacation API"); 
  54.         navigator.geolocation.getCurrentPosition(updateLocation); 
  55.         } 
  56.     }*/ 
  57.     function updateLocation(position){ 
  58.          latitude = position.coords.latitude; 
  59.          longitude = position.coords.longitude; 
  60.         var accuracy = position.coords.accuracy; 
  61.         var timestamp = position.timestamp; 
  62.         document.getElementById("latitude").innerHTML =latitude ; 
  63.         document.getElementById("longitude").innerHTML = longitude; 
  64.         document.getElementById("accuracy").innerHTML = accuracy; 
  65.         document.getElementById("timestamp").innerHTML = timestamp; 
  66.         if(accuracy >= 500){ 
  67.           updateStatus("need more accure vslues to calculate distance."); 
  68.           return; 
  69.         } 
  70.         //計算距離 
  71.         if((lastLat != null)&&(lastLong != null)){ 
  72.            var CurrentDistance = distance(latitude,longitude,lastLat,lastLong); 
  73.            document.getElementById("currDist").innerHTML = "Current distance traveled"+CurrentDistance+"KM"; 
  74.            totalDistance  += CurrentDistance; 
  75.            document.getElementById("totalDist").innerHTML="=Total distance traveled "+totalDistance+"KM"; 
  76.         } 
  77.         lastLat = latitude; 
  78.         lastLong = longitude; 
  79.         updateStatus("Loacation Successfully uodated!!!"); 
  80.         initialize(latitude,longitude); 
  81.         } 
  82.         function handleLocationError(error){ 
  83.           switch(error.code){ 
  84.            case 0 : 
  85.            uodateStatus("There was an error while retrieving your Location "+error.message); 
  86.            break; 
  87.             case 1 : 
  88.            uodateStatus("the user prevented this page from your Location "+error.message); 
  89.             break; 
  90.             case 2 : 
  91.            uodateStatus("the browser was unable to determine your Location "+error.message); 
  92.             break; 
  93.             case 3 : 
  94.            uodateStatus("the browser timed out before retrieving your Location "+error.message); 
  95.             break; 
  96.           } 
  97.         } 
  98.       function toRadians(degree){ 
  99.         return degree = Math.PI / 180; 
  100.       } 
  101.       function distance(latitude1, longitude1, latitude2, longitude2){ 
  102.       var R = 6371; 
  103.       var deltatidude = toRadians(latitude2- latitude1); 
  104.       var dellongitude = toRadians(longitude2 - longitude1); 
  105.       latitude1  = toRadians(latitude1); 
  106.       latitude2  = toRadians(latitude2); 
  107.       var a = Math.sin(deltalatitude/2)*Math.cos(deltalatitude/2)*Math.cos(latitude1)*Math.cos(latitude2)*Math.sin(dellongitude/2)*Math.sin(dellongitude/2); 
  108.       var c= 2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); 
  109.       var d = R*c; 
  110.       return d; 
  111.       } 
  112.       //R是地球的半徑，單位是KM 
  113.       function updateStatus(message){ 
  114.       document.getElementById("status").innerHTML = message; 
  115.       } 
  116.       function loadDemo(){ 
  117.         if(navigator.geolocation){ 
  118.         updateStatus("your browser is support html5 geolacation"); 
  119.         navigator.geolocation.watchPosition(updateLocation,handleLocationError,{maximumAge:20000}); 
  120.         } 
  121.       } 
  122.   function initialize(la,longi) { 
  123.        var latlng = new google.maps.LatLng(la, longi); 
  124.        var div = document.createElement("div"); 
  125.        var str = "<b>我的當前位置</b>"; 
  126.        var myOptions = { 
  127.         zoom: 18, 
  128.         center: latlng, 
  129.         mapTypeId: google.maps.MapTypeId.TERRAIN 
  130.         }; 
  131.         var map = new google.maps.Map(document.getElementById("map_canvas"), 
  132.         myOptions); 
  133.         var marker = new google.maps.Marker({ 
  134.            position:latlng, 
  135.            map:map, 
  136.            title:"My Location" 
  137.         }); 
  138.    } 
  139.       window.addEventListener("load",loadDemo, true); 
  140.       </script> 
  141.       <div id="map_canvas" style="width:100%; height:100%"></div> 
  142.  </body> 
  143. </html> 

 

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
柯坪县| 饶河县| 荥阳市| 吕梁市| 政和县| 拜泉县| 西吉县| 新津县| 莒南县| 涿鹿县| 商城县| 博客| 民权县| 宜兰县| 武穴市| 西乌| 孝义市| 和龙市| 洛宁县| 漯河市| 贺州市| 大同市| 项城市| 山东省| 滕州市| 龙山县| 绥芬河市| 寿宁县| 宁化县| 鹤岗市| 怀来县| 喀什市| 民权县| 通榆县| 洪泽县| 高阳县| 修文县| 托克托县| 吉隆县| 临颍县| 玛纳斯县|