html5 - 地图
2015-12-24 15:04
603 查看
demo截图:
View Code
后记:
客观的说基本没用,百度地图,高德地图做的都很完善了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图定位</title> <style> *,body,html{ margin:0;padding:0;height:100%;width:100%; } li{ list-style: none;} .box{width:1000px;margin:0 auto;} ul{ padding:20px; } li{height:30px; font-size: 14px;line-height: 30px; } span{ float:left;width:100px;text-align: right; } div{margin-left:100px;padding-left: 10px;} </style> <script> window.onload = function(){ // 判断浏览器是否支持定位; if( navigator.geolocation ){ var watchId = null; var oBox = document.getElementById('box'), aDivs = oBox.getElementsByTagName('div'); /** * Geolocation分两种:‘单次定位请求’、‘重复定位请求’: * 重复更新位置请求(不允许指定多长时间请求一次) 第一个参数(watchMap)执行的函数,第二个参数(handleError) 错误执行函数,第三个参数JSON: * { * enableHighAccuracy : 高精度模式 (true/false),谨慎使用; * timeout : 允许最长时间计算,就会调用错误处理函数(ms); * maximumAge : 从新计算位置的时间间隔(ms); * } */ watchId = navigator.geolocation.watchPosition(watchMap, handleError, {enableHighAccuracy:true,timeout:5000, maximumAge: 5000 }); //一次更新位置请求 //watchId = navigator.geolocation.getCurrentPosition(onceMap, handleError, {enableHighAccuracy:true,timeout:5000, maximumAge: 5000 }); //重复请求的函数; function watchMap( position ){ var latitude = position.coords.latitude; //纬度; var longitude = position.coords.longitude; //经度; var accuracy = position.coords.accuracy; //准确度; var timestamp = position.timestamp; //时间戳; //如果浏览器支持否则只会返回null/undefined: var altitude = position.altitude; //海拔高度(m); var altitudeAccuracy = position.altitudeAccuracy; //海拔高度精确度(m); var heading = position.heading; //行进的方向(相对正北方向); var speed = position.speed; //地面速度(m/s); //判断准确度小于3000; if( accuracy <= 3000 ){ aDivs[0].innerHTML = latitude; aDivs[1].innerHTML = longitude; aDivs[2].innerHTML = accuracy; aDivs[3].innerHTML = timestamp; aDivs[4].innerHTML = altitude; aDivs[5].innerHTML = altitudeAccuracy; aDivs[6].innerHTML = heading; aDivs[7].innerHTML = speed; navigator.geolocation.clearWatch(watchId); //停止重复求情; } } //一次请求的函数; function onceMap( position ) { var latitude = position.coords.latitude; //纬度; var longitude = position.coords.longitude; //经度; var accuracy = position.coords.accuracy; //准确度; var timestamp = position.timestamp; //时间戳; //如果浏览器支持否则只会返回null: var altitude = position.altitude; //海拔高度(m); var altitudeAccuracy = position.altitudeAccuracy; //海拔高度精确度(m); var heading = position.heading; //行进的方向(相对正北方向); var speed = position.speed; //地面速度(m/s); //判断准确度小于3000; if( accuracy <= 3000 ){ aDivs[0].innerHTML = latitude; aDivs[1].innerHTML = longitude; aDivs[2].innerHTML = accuracy; aDivs[3].innerHTML = timestamp; aDivs[4].innerHTML = altitude; aDivs[5].innerHTML = altitudeAccuracy; aDivs[6].innerHTML = heading; aDivs[7].innerHTML = speed; } } //错误处理; function handleError( error ){ switch (error.code) { //错误编号; case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; case 3: alert("获取信息超时"); break; default: alert("未知错误"); break; } } } } </script> </head> <body> <div class="box" id="box"> <ul> <li> <span> 纬度: </span> <div> </div> </li> <li> <span> 经度: </span> <div> </div> </li> <li> <span> 准确度: </span> <div> </div> </li> <li> <span> 时间: </span> <div> </div> </li> <li> <span> 海拔高度: </span> <div> </div> </li> <li> <span> 海拔精确度: </span> <div> </div> </li> <li> <span> 行进方向: </span> <div> </div> </li> <li> <span> 地面速度: </span> <div> </div> </li> <li> <span> 错误信息: </span> <div> </div> </li> </ul> </div> </body> </html>
View Code
后记:
客观的说基本没用,百度地图,高德地图做的都很完善了。
相关文章推荐
- Facebook平台视频正式转向HTML5播放器
- HTML5新增元素
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物(中)
- 前端规范(html5,js)
- HTML5商业项目训练营
- HTML5初识
- HTML5之离线应用缓存
- HTML5-12月23日笔记
- HTML5音频audio播放与暂停
- 如何去设计一个自适应的网页设计或HTMl5
- html5中拨打电话代码
- 微场景H5(物理设备和渲染像素)
- XHTML5 与 HTML 4.01的差异
- HTML5本地存储 -sessionStorage localStorage 总结
- h5案例分享:绿源电动车-与美国队长之间的约定
- html5学习_MySecondPage_文本排版
- html5代码,获取地理位置
- html5中localStorage存储
- html5学习_MyFirstWebPage_语法的概念与框架
- HTML5入门十一---Canvas画布实现画图(二)