先写一个关于定位时间测试的程序，看看到底花了多长时间定位的。
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 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 位置移动的应用！