html5 - 地图

demo截图:

 

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>
View Code

后记:

客观的说基本没用,百度地图,高德地图做的都很完善了。

 

posted @ 2015-12-24 15:04  uustoboy  阅读(418)  评论(0编辑  收藏  举报