Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>html5-地图</title>
</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>
 
*,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;}
 
// 判断浏览器是否支持定位;
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:    
        aDivs[8].innerHTML = '位置服务被拒绝';
        break;  
      case 2:  
        aDivs[8].innerHTML = '暂时获取不到位置信息';
        break;  
      case 3:  
        aDivs[8].innerHTML = '获取信息超时';
        break;  
      default:  
        aDivs[8].innerHTML = '未知错误';
        break;  
    }  
  }
}
        
    
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tianqi2786pro
0viewers