html5 - 地图

最新推荐文章于 2023-04-27 14:16:00 发布

weixin_30419799

最新推荐文章于 2023-04-27 14:16:00 发布

阅读量88

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/auok/p/5072096.html

版权

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

后记:

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

转载于:https://www.cnblogs.com/auok/p/5072096.html

weixin_30419799

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 - 地图

demo截图:demo链接代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>地图定位</title> 6 <style...
复制链接

扫一扫

html5 - 地图

“相关推荐”对你有帮助么？