基本调用
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> 基于html5的稍微复杂的Goolge Map 调用
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height:800px; width:480px; } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } #metaDataTable { position:absolute; top:30px; left:0px; z-index:1000;} </style> <title>html5_Geolocation</title> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script> </head> <body> <div id="metaDataTable"> <h2> Html5 Geolocation Distance Tracker</h2> <p id="status"> Html5 Geolocation is<strong> not</strong> suppert your browser!!!</p> <h3>Current Position:</h3> <table border="1"> <tr> <td width=40 scope="col">纬度</td> <td wisth=114 id="latitude">?</td> </tr> <tr> <td width=40 scope="col">经度</td> <td wisth=114 id="longitude">?</td> </tr> <tr> <td width=40 scope="col">海拔</td> <td wisth=114 id="accuracy">?</td> </tr> <tr> <td width=40 scope="col">Last TimeStamp</td> <td wisth=114 id="timestamp">?</td> </tr> </table> <h5 id="currDist"> Current distance traveled:0.0KM</h5> <h5 id="totalDist">Total distance traveled:0.0KM</h5> </div> <script> var totalDistance = 0.0; var lastLat; var lastLong; var latitude; var longitude; /*function getGeolacation(){ if(navigator.geolocation){ alert("Support the html5 Geolacation API"); navigator.geolocation.getCurrentPosition(updateLocation); } }*/ function updateLocation(position){ latitude = position.coords.latitude; longitude = position.coords.longitude; var accuracy = position.coords.accuracy; var timestamp = position.timestamp; document.getElementById("latitude").innerHTML =latitude ; document.getElementById("longitude").innerHTML = longitude; document.getElementById("accuracy").innerHTML = accuracy; document.getElementById("timestamp").innerHTML = timestamp; if(accuracy >= 500){ updateStatus("need more accure vslues to calculate distance."); return; } //计算距离 if((lastLat != null)&&(lastLong != null)){ var CurrentDistance = distance(latitude,longitude,lastLat,lastLong); document.getElementById("currDist").innerHTML = "Current distance traveled"+CurrentDistance+"KM"; totalDistance += CurrentDistance; document.getElementById("totalDist").innerHTML="=Total distance traveled "+totalDistance+"KM"; } lastLat = latitude; lastLong = longitude; updateStatus("Loacation Successfully uodated!!!"); initialize(latitude,longitude); } function handleLocationError(error){ switch(error.code){ case 0 : uodateStatus("There was an error while retrieving your Location "+error.message); break; case 1 : uodateStatus("the user prevented this page from your Location "+error.message); break; case 2 : uodateStatus("the browser was unable to determine your Location "+error.message); break; case 3 : uodateStatus("the browser timed out before retrieving your Location "+error.message); break; } } function toRadians(degree){ return degree = Math.PI / 180; } function distance(latitude1, longitude1, latitude2, longitude2){ var R = 6371; var deltatidude = toRadians(latitude2- latitude1); var dellongitude = toRadians(longitude2 - longitude1); latitude1 = toRadians(latitude1); latitude2 = toRadians(latitude2); var a = Math.sin(deltalatitude/2)*Math.cos(deltalatitude/2)*Math.cos(latitude1)*Math.cos(latitude2)*Math.sin(dellongitude/2)*Math.sin(dellongitude/2); var c= 2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); var d = R*c; return d; } //R是地球的半径，单位是KM function updateStatus(message){ document.getElementById("status").innerHTML = message; } function loadDemo(){ if(navigator.geolocation){ updateStatus("your browser is support html5 geolacation"); navigator.geolocation.watchPosition(updateLocation,handleLocationError,{maximumAge:20000}); } } function initialize(la,longi) { var latlng = new google.maps.LatLng(la, longi); var div = document.createElement("div"); var str = "<b>我的当前位置</b>"; var myOptions = { zoom: 18, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position:latlng, map:map, title:"My Location" }); } window.addEventListener("load",loadDemo, true); </script> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> 亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
