HTML 5-新API-geolocation-インスタンス-距離トラッカー
23866 ワード
1 <body onLoad="loadDemo()">
2 <header>
3 <h1>oldmeter </h1>
4 <h4> </h4>
5 </header>
6 <section>
7 <article>
8 <header>
9 <h1> </h1>
10 <p class="info" id="status"> 。</p>
11 <div class="geostatus">
12 <p id="latitude"> :</p>
13 <p id="longitude"> :</p>
14 <p id="accuracy"> :</p>
15 <p id="altitude"> ：</p>
16 <p id="altitudeAccuracy"> ：</p>
17 <p id="heading"> 、 ：</p>
18 <p id="speed"> (m/s):</p>
19 <p id="timestamp"> :</p>
20 <p id="currDist"> ：</p>
21 <p id="totalDist"> ：</p>
22 </div>
23 </header>
24 </article>
25 </section>
26 <footer>
27 <h2> HTML5， ！</h2>
28 </footer>
29 <script type="text/javascript">
30 var totalDistance=0.0;
31 var lastLat;
32 var lastLong;
33
34 Number.prototype.toRadians=function(){
35 return this * Math.PI/180;
36 }
37
38 function distance(latitude1,longitude1,latitude2,longitude2){
39 var R=6371;//R ， km
40 var deltalatitude=(latitude2-latitude1).toRadians();
41 var deltaLongitude=(longitude2-longitude1).toRadians();
42 latitude1=latitude1.toRadians();
43 latitude2=latitude2.toRadians();
44
45 var a=Math.sin(deltalatitude/2) *
46 Math.sin(deltalatitude/2) +
47 Math.cos(latitude1) *
48 Math.cos(latitude2) *
49 Math.sin(deltaLongitude/2) *
50 Math.sin(deltaLongitude/2);
51 var c=2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
52 var d=R*c;
53 return d;
54
55 }
56
57 function updateErrorStatus(message){
58 document.getElementById("status").style.background="papayaWhip";
59 document.getElementById("status").innerHTML="<strong>Error</strong>:"+message;
60
61 }
62
63 function updateStatus(message){
64 document.getElementById("status").style.background="paleGreen";
65 document.getElementById("status").innerHTML=message;
66
67 }
68
69
70 function loadDemo(){
71 // geolocation
72 if(navigator.geolocation){
73 document.getElementById("status").innerHTML=" HTML5 Geolocation";
74 navigator.geolocation.watchPosition(updateLocation,handleLocationError,{timeout:10000});
75 }
76 }
77
78
79 function updateLocation(position){
80
81 var latitude=position.coords.latitude;//
82 var longitude=position.coords.longitude;//
83 var accuracy=position.coords.accuracy;// ( ）
84 var altitude=position.coords.altitude;//
85 var altitudeAccuracy=position.coords.altitudeAccuracy;//
86 var heading=position.coords.heading;// 、
87 var speed=position.coords.speed;// m/s
88 var timestamp=position.timestamp;//
89
90 document.getElementById("latitude").innerHTML=" ："+latitude;
91 document.getElementById("longitude").innerHTML=" ："+longitude;
92 document.getElementById("accuracy").innerHTML=" ："+accuracy+" ";
93 document.getElementById("altitude").innerHTML=" ："+altitude+" ";
94 document.getElementById("altitudeAccuracy").innerHTML=" ："+altitudeAccuracy;
95 document.getElementById("heading").innerHTML=" ："+heading;
96 document.getElementById("speed").innerHTML=" ："+speed+" ";
97 document.getElementById("timestamp").innerHTML=" ："+timestamp;
98
99 // ... accuracy
100 if(accuracy>=30000){
101
102 updateStatus(" ");
103 return;
104 }
105
106
107 if((lastLat !=null)&&(lastLong !=null)){
108 var currentDistance =distance(latitude,longitude,lastLat,lastLong);
109
110 document.getElementById("currDist").innerHTML=" "+currentDistance.toFixed(2)+"km";
111 totalDistance +=currentDistance;
112 document.getElementById("totalDist").innerHTML=" "+currentDistance.toFixed(2)+"km";
113
114 updateStatus(" 。");
115 lastLong=longitude;
116 }
117 }
118
119 //
120 function handleLocationError(error){
121 switch(error.code){
122 case 0:
123 updateErrorStatus(" : "+error.message);
124 break;
125 case 1:
126 updateErrorStatus(" 。");
127 break;
128 case 2:
129 updateErrorStatus(" , "+error.message);
130 break;
131 case 3:
132 updateErrorStatus(" ， 。");
133 break;
134 }
135 }
136 </script>
137 </body>