位置情報

location.PNG

単発

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Location</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  var options = {
    enableHighAccuracy: false, // true : 高精度
    timeout: 5000              // タイムアウト (ms)
  };

  window.navigator.geolocation.getCurrentPosition(
    showLocation, showError, options);
});

function showLocation(e) {
  var $ul = $('ul');

  var obj = e.coords;
  for (var key in obj) {
    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
  }
}

function showError(e) {
  switch(e.code) {
  case 1 :
    alert('Error 1 : PERMISSION_DENIED');
    break;
  case 2 :
    alert('Error 2 : POSITION UNAVAILABLE');
    break;
  case 3 :
    alert('Error 3 : TIMEOUT');
    break;
  default :
    alert('Error ' + e.code + ' : UNKNOWN ERROR');
    break;
  }
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<UL></UL>
</body>
</html>

連続

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Location2</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var watchId;

$(document).ready(function(){
  var options = {
    enableHighAccuracy: false, // true : 高精度
    timeout: 5000,             // タイムアウト (ms)
    maximumAge: 1000           // キャッシュ有効期間(ミリ秒)
  };

  
  $('button').on('click' , function(e) {
    var $this = $(this);
    
    if ($this.text() == 'Start') {
      $this.text('Stop');
      watchId = window.navigator.geolocation.watchPosition(
                   showLocation, showError, options);
    } else {
      $this.text('Start');
      window.navigator.geolocation.clearWatch(watchId);
    }
  });
  
});

function showLocation(e) {
  var $ul = $('ul');
  $ul.empty();
  var obj = e.coords;
  for (var key in obj) {
    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
  }
}

function showError(e) {
  switch(e.code) {
  case 1 :
    alert('Error 1 : PERMISSION_DENIED');
    break;
  case 2 :
    alert('Error 2 : POSITION UNAVAILABLE');
    break;
  case 3 :
    alert('Error 3 : TIMEOUT');
    break;
  default :
    alert('Error ' + e.code + ' : UNKNOWN ERROR');
    break;
  }
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<button>Start</button>
<UL></UL>
</body>
</html>

加速度

motion.PNG

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Motion</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  window.addEventListener("devicemotion", showmotion, true);
});

function showmotion(e) {
  var $ul = $('ul');
  $ul.empty();

  var obj = e.accelerationIncludingGravity;
  for (var key in obj) {
    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
  }
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<UL></UL>
</body>
</html>

傾き

tilt.PNG

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Tilt</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  window.addEventListener("deviceorientation", showorientation, true);
});

function showorientation(e) {
  var $ul = $('ul');
  $ul.empty();

  var obj = e;
//  for (var key in obj) {
//    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
//  }
  $ul.append('<li>alpha(z軸)=' + obj.alpha + '</li>');
  $ul.append('<li>beta(x軸)=' + obj.beta + '</li>');
  $ul.append('<li>gamma(y軸)=' + obj.gamma + '</li>');
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<UL></UL>
</body>
</html>

コンパス

compass.PNG

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Compass</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  window.addEventListener("deviceorientation", showorientation, true);
});

function showorientation(e) {
  var $ul = $('ul');
  $ul.empty();

  var obj = e;
//  for (var key in obj) {
//    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
//  }
  $ul.append('<li>webkitCompassAccuracy=' + obj.webkitCompassAccuracy + '</li>');
  $ul.append('<li>webkitCompassHeading=' + obj.webkitCompassHeading + '</li>');
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<UL></UL>
</body>
</html>

HTML


添付ファイル: filetilt.html 534件 [詳細] filemotion.PNG 428件 [詳細] filetilt.PNG 433件 [詳細] filelocation.PNG 413件 [詳細] filecompass.PNG 415件 [詳細] filemotion.html 693件 [詳細] filelocation2.html 675件 [詳細] filelocation1.html 701件 [詳細] filecompass.html 673件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2012-11-21 (水) 23:02:40 (1473d)
ISBN10
ISBN13
9784061426061