Head First HTML5 Chapter 5 地理定位，无处可套，watchme 程序 google Maps

先写一个关于定位时间测试的程序，看看到底花了多长时间定位的。

timeout_test.html

 1 <!--
 2 To change this template, choose Tools | Templates
 3 and open the template in the editor.
 4 -->
 5 <!DOCTYPE html>
 6 <html>
 7     <head>
 8         <title></title>
 9         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10         <script src="timeout_test.js"></script>
11         <!--
12         <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
13           -->
14         <link rel="stylesheet" href="watchmepan.css">
15     </head>
16     <body>
17         <form>
18             <input type="button" id="watch" value="Watch Me">
19             <input type="button" id="clearWatch" value="Clear Watch">
20         </form>
21         <div id= "myLocation">
22             Your location will go here.
23         </div>
24         <div id= "distance">
25             Distance from Silicon Valley will go here.
26         </div>
27         <div id="map">
28         </div>
29     </body>
30 </html>

timeout_test.js

 1 /* 
 2  * To change this template, choose Tools | Templates
 3  * and open the template in the editor.
 4  */
 5 var options = {enableHighAccuracy:true, timeout:100, maxmiumAge:0}; //高精度，100秒内定位，不采用缓存
 6 window.onload = getMyLocation;
 7 
 8 function getMyLocation(){
 9     if (navigator.geolocation){
10         navigator.geolocation.getCurrentPosition(
11             displayLocation,
12             displayError,
13             options
14         );
15     }else{
16         alert("Oops, no geolocation support!")
17     }
18 }
19 
20 function displayError(error) {
21     var errorTypes = {
22         0: "Unknown error",
23         1: "Permission denied",
24         2: "Position is not available",
25         3: "Request timeout"
26     };
27     var errorMessage = errorTypes[error.code];
28     if (error.code == 0 || error.code == 2) {
29         errorMessage = errorMessage + " " + error.message;
30     }
31     var div = document.getElementById("myLocation");
32     div.innerHTML = errorMessage;
33 //---- change the options.timeout to re-locate until success
34     options.timeout += 100;
35     navigator.geolocation.getCurrentPosition(
36         displayLocation,
37         displayError,
38         options);
39     div.innerHTML += "......checking again with timeout="+options.timeout;
40 
41 }
42 
43 function displayLocation(position){
44     var latitude = position.coords.latitude;
45     var longitude = position.coords.longitude;
46     var div = document.getElementById("myLocation");
47     div.innerHTML = "You are at latitude: "+ latitude+" Longitude: "+ longitude;
48     div.innerHTML += " found in "+ options.timeout+ " million seconds";
49 
50 }

myLoc.css

 1 /*
 2  * myLoc.css
 3  *
 4 */
 5 
 6 body {
 7     font-family: Arial, Helvetica, sans-serif;
 8     margin: 10px;
 9 }
10 form, div#location, div#distance {
11     padding: 5px;
12 }
13 
14 div#map {
15     margin: 5px;
16     width: 400px;
17     height: 400px;
18     border: 1px solid black;
19 }
20 
21 
22 /*
23  * Use this CSS to make the map full screen
24  *
25 
26 html, body, div#map {
27     width: 100%;
28     height: 100%;
29     margin: 0px;
30 }
31 
32 form {
33     position: absolute;
34     top: 40px;
35     right: 10px;
36     z-index: 2;
37 }
38 
39 div#location, div#distance {
40     display: none;
41 }
42  */

执行结果是：

通过上图我们可以看到，在如用了一共300ms的时间。

 

1.你的应用调用watchPosition程序，成功一个成功处理函数。

2.watchPosition在后台不断监视着你的位置

3.你的位置改变时，watchPosition调用成功处理函数来报告你的位置

4.watchPosition继续见识你的位置（并向成功处理程序报告），直至你调用clearWatch将它清除

 

 

完成这个HTML5定位的应用！！！

应用的目的是，时刻看到该用户，运动时候的轨迹。

我们采用这种方法，用的是新建marker的方法。

思路----就是按照一定频率，在地图上确定位置，并且做上marker，就可以连起来，成为一个运动轨迹。

这个HTML5 位置移动的应用！

 

 

posted @ 2013-04-04 13:38  spaceship9  阅读(238)  评论(0)    收藏  举报