基本调用

<!DOCTYPEhtml><html><head><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/><styletype="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#map_canvas{height:100%}</style><scripttype="text/javascript"src="https://maps.google.com/maps/api/js?sensor=true"></script><scripttype="text/javascript">functioninitialize(){varlatlng=newgoogle.maps.LatLng(-34.397,150.644);varmyOptions={zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};varmap=newgoogle.maps.Map(document.getElementById("map_canvas"),myOptions);}</script></head><bodyonload="initialize()"><divid="map_canvas"style="width:100%;height:100%"></div></body></html>

基于html5的稍微复杂的Goolge Map 调用

<!doctypehtml><html><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/><styletype="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><scripttype="text/javascript"src="https://maps.google.com/maps/api/js?sensor=false"></script></head><body><divid="metaDataTable"><h2>Html5GeolocationDistanceTracker</h2><pid="status">Html5Geolocationis<strong>not</strong>suppertyourbrowser!!!</p><h3>CurrentPosition:</h3><tableborder="1"><tr><tdwidth=40scope="col">纬度</td><tdwisth=114id="latitude">?</td></tr><tr><tdwidth=40scope="col">经度</td><tdwisth=114id="longitude">?</td></tr><tr><tdwidth=40scope="col">海拔</td><tdwisth=114id="accuracy">?</td></tr><tr><tdwidth=40scope="col">LastTimeStamp</td><tdwisth=114id="timestamp">?</td></tr></table><h5id="currDist">Currentdistancetraveled:0.0KM</h5><h5id="totalDist">Totaldistancetraveled:0.0KM</h5></div><script>vartotalDistance=0.0;varlastLat;varlastLong;varlatitude;varlongitude;/*functiongetGeolacation(){if(navigator.geolocation){alert("Supportthehtml5GeolacationAPI");navigator.geolocation.getCurrentPosition(updateLocation);}}*/functionupdateLocation(position){latitude=position.coords.latitude;longitude=position.coords.longitude;varaccuracy=position.coords.accuracy;vartimestamp=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("needmoreaccurevsluestocalculatedistance.");return;}//计算距离if((lastLat!=null)&&(lastLong!=null)){varCurrentDistance=distance(latitude,longitude,lastLat,lastLong);document.getElementById("currDist").innerHTML="Currentdistancetraveled"+CurrentDistance+"KM";totalDistance+=CurrentDistance;document.getElementById("totalDist").innerHTML="=Totaldistancetraveled"+totalDistance+"KM";}lastLat=latitude;lastLong=longitude;updateStatus("LoacationSuccessfullyuodated!!!");initialize(latitude,longitude);}functionhandleLocationError(error){switch(error.code){case0:uodateStatus("TherewasanerrorwhileretrievingyourLocation"+error.message);break;case1:uodateStatus("theuserpreventedthispagefromyourLocation"+error.message);break;case2:uodateStatus("thebrowserwasunabletodetermineyourLocation"+error.message);break;case3:uodateStatus("thebrowsertimedoutbeforeretrievingyourLocation"+error.message);break;}}functiontoRadians(degree){returndegree=Math.PI/180;}functiondistance(latitude1,longitude1,latitude2,longitude2){varR=6371;vardeltatidude=toRadians(latitude2-latitude1);vardellongitude=toRadians(longitude2-longitude1);latitude1=toRadians(latitude1);latitude2=toRadians(latitude2);vara=Math.sin(deltalatitude/2)*Math.cos(deltalatitude/2)*Math.cos(latitude1)*Math.cos(latitude2)*Math.sin(dellongitude/2)*Math.sin(dellongitude/2);varc=2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));vard=R*c;returnd;}//R是地球的半径，单位是KMfunctionupdateStatus(message){document.getElementById("status").innerHTML=message;}functionloadDemo(){if(navigator.geolocation){updateStatus("yourbrowserissupporthtml5geolacation");navigator.geolocation.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});}}functioninitialize(la,longi){varlatlng=newgoogle.maps.LatLng(la,longi);vardiv=document.createElement("div");varstr="<b>我的当前位置</b>";varmyOptions={zoom:18,center:latlng,mapTypeId:google.maps.MapTypeId.TERRAIN};varmap=newgoogle.maps.Map(document.getElementById("map_canvas"),myOptions);varmarker=newgoogle.maps.Marker({position:latlng,map:map,title:"MyLocation"});}window.addEventListener("load",loadDemo,true);</script><divid="map_canvas"style="width:100%;height:100%"></div></body></html>