html5 - 地图
demo截图:
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>地图定位</title> 6 <style> 7 *,body,html{ margin:0;padding:0;height:100%;width:100%; } 8 li{ list-style: none;} 9 .box{width:1000px;margin:0 auto;} 10 ul{ padding:20px; } 11 li{height:30px; font-size: 14px;line-height: 30px; } 12 span{ float:left;width:100px;text-align: right; } 13 div{margin-left:100px;padding-left: 10px;} 14 </style> 15 <script> 16 window.onload = function(){ 17 18 // 判断浏览器是否支持定位; 19 if( navigator.geolocation ){ 20 21 var watchId = null; 22 23 var oBox = document.getElementById('box'), 24 aDivs = oBox.getElementsByTagName('div'); 25 26 /** 27 * Geolocation分两种：‘单次定位请求’、‘重复定位请求’： 28 * 重复更新位置请求(不允许指定多长时间请求一次) 第一个参数(watchMap)执行的函数,第二个参数(handleError) 错误执行函数,第三个参数JSON: 29 * { 30 * enableHighAccuracy : 高精度模式 (true/false),谨慎使用; 31 * timeout : 允许最长时间计算，就会调用错误处理函数(ms); 32 * maximumAge : 从新计算位置的时间间隔(ms); 33 * } 34 */ 35 watchId = navigator.geolocation.watchPosition(watchMap, handleError, {enableHighAccuracy:true,timeout:5000, maximumAge: 5000 }); 36 37 //一次更新位置请求 38 //watchId = navigator.geolocation.getCurrentPosition(onceMap, handleError, {enableHighAccuracy:true,timeout:5000, maximumAge: 5000 }); 39 40 //重复请求的函数; 41 function watchMap( position ){ 42 43 var latitude = position.coords.latitude; //纬度; 44 var longitude = position.coords.longitude; //经度; 45 var accuracy = position.coords.accuracy; //准确度; 46 var timestamp = position.timestamp; //时间戳; 47 //如果浏览器支持否则只会返回null/undefined: 48 var altitude = position.altitude; //海拔高度(m); 49 var altitudeAccuracy = position.altitudeAccuracy; //海拔高度精确度(m); 50 var heading = position.heading; //行进的方向(相对正北方向); 51 var speed = position.speed; //地面速度(m/s); 52 53 //判断准确度小于3000; 54 if( accuracy <= 3000 ){ 55 56 aDivs[0].innerHTML = latitude; 57 aDivs[1].innerHTML = longitude; 58 aDivs[2].innerHTML = accuracy; 59 aDivs[3].innerHTML = timestamp; 60 aDivs[4].innerHTML = altitude; 61 aDivs[5].innerHTML = altitudeAccuracy; 62 aDivs[6].innerHTML = heading; 63 aDivs[7].innerHTML = speed; 64 65 navigator.geolocation.clearWatch(watchId); //停止重复求情; 66 67 } 68 69 } 70 71 //一次请求的函数; 72 function onceMap( position ) { 73 74 var latitude = position.coords.latitude; //纬度; 75 var longitude = position.coords.longitude; //经度; 76 var accuracy = position.coords.accuracy; //准确度; 77 var timestamp = position.timestamp; //时间戳; 78 //如果浏览器支持否则只会返回null: 79 var altitude = position.altitude; //海拔高度(m); 80 var altitudeAccuracy = position.altitudeAccuracy; //海拔高度精确度(m); 81 var heading = position.heading; //行进的方向(相对正北方向); 82 var speed = position.speed; //地面速度(m/s); 83 84 //判断准确度小于3000; 85 if( accuracy <= 3000 ){ 86 87 aDivs[0].innerHTML = latitude; 88 aDivs[1].innerHTML = longitude; 89 aDivs[2].innerHTML = accuracy; 90 aDivs[3].innerHTML = timestamp; 91 aDivs[4].innerHTML = altitude; 92 aDivs[5].innerHTML = altitudeAccuracy; 93 aDivs[6].innerHTML = heading; 94 aDivs[7].innerHTML = speed; 95 96 } 97 98 } 99 100 //错误处理; 101 function handleError( error ){ 102 103 switch (error.code) { //错误编号; 104 case 1: 105 alert("位置服务被拒绝"); 106 break; 107 case 2: 108 alert("暂时获取不到位置信息"); 109 break; 110 case 3: 111 alert("获取信息超时"); 112 break; 113 default: 114 alert("未知错误"); 115 break; 116 } 117 118 } 119 } 120 121 } 122 123 </script> 124 </head> 125 <body> 126 <div class="box" id="box"> 127 <ul> 128 <li> 129 <span> 130 纬度: 131 </span> 132 <div> 133 134 </div> 135 </li> 136 <li> 137 <span> 138 经度: 139 </span> 140 <div> 141 142 </div> 143 </li> 144 <li> 145 <span> 146 准确度: 147 </span> 148 <div> 149 150 </div> 151 </li> 152 <li> 153 <span> 154 时间: 155 </span> 156 <div> 157 158 </div> 159 </li> 160 <li> 161 <span> 162 海拔高度: 163 </span> 164 <div> 165 166 </div> 167 </li> 168 <li> 169 <span> 170 海拔精确度: 171 </span> 172 <div> 173 174 </div> 175 </li> 176 <li> 177 <span> 178 行进方向: 179 </span> 180 <div> 181 182 </div> 183 </li> 184 <li> 185 <span> 186 地面速度: 187 </span> 188 <div> 189 190 </div> 191 </li> 192 <li> 193 <span> 194 错误信息: 195 </span> 196 <div> 197 198 </div> 199 </li> 200 </ul> 201 </div> 202 203 </body> 204 </html>
后记:
客观的说基本没用，百度地图，高德地图做的都很完善了。
