溫馨提示×

溫馨提示×

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

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

調(diào)用googleMapApi

發(fā)布時間：2020-05-31 07:22:11 來源：網(wǎng)絡(luò) 閱讀：512 作者：起始頁 欄目：移動開發(fā)

 基本調(diào)用

  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 調(diào)用

 

  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">經(jīng)度</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問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手