[自作アプリ/Cordova]GPSスピードメーター制作(1) --- HTML5で位置情報を常に取得する

自分用にGPSスピードメーターを作ってみようかなと思ったので、その過程をメモ書き程度に。

私はAndroidアプリ開発にApache Cordova(Phonegap)を使っているので、HTMLでさくっと位置情報取得できないかなーと調べてみたところ、ありましたｗ

[HTML5] Geolocation APIを使う

Geolocation APIはGPS、無線LAN(WiFi)、携帯電話基地局、IPアドレスから位置情報を取得します。

よってネットワーク環境への接続が多いほど、取得できる位置情報はより精度が高くなります。

スマートフォンの場合はGPS(位置情報の取得)の許可、Wifi、モバイルデータ通信を有効にしておくのがよいでしょう。

常時位置情報を取得するにはwatchPosition関数を使います。
位置情報を自動で取得し、コールバック関数の引数にデータを渡します。

window.navigator.geolocation.watchPosition(SuccessCallback,ErrorCallback,Option);
function SuccessCallback(position){
  // 位置情報取得
  var latitude = position.coords.(位置情報パラメータ);
}

位置情報パラメータ 

緯度(度)：latitude
経度(度)：longitude
緯度、経度の誤差(m)：accuracy
高度(m)：altitude
高度の誤差(m)：altitudeAccuracy
移動方向(度)：heading
移動速度(m/s)：speed


サンプルページ

以下、サンプルコードです。

javascript

// 常時位置情報を取得する
 window.navigator.geolocation.watchPosition(function(position){
  
  // 緯度
  var latitude = position.coords.latitude;
  $('#latitude').html(latitude);
  // 経度
  var longitude = position.coords.longitude;
  $('#longitude').html(longitude);
  // 緯度・経度の精度
  var accuracy = position.coords.accuracy;
  $('#accuracy').html(accuracy);
  // GPS 高度
  var altitude = position.coords.altitude;
  $('#altitude').html(altitude);
  // GPS 高度の精度
  var altitudeAccuracy = position.coords.altitudeAccuracy;
  $('#altitudeAccuracy').html(altitudeAccuracy);
  // 移動方向
  var heading = position.coords.heading;
  $('#heading').html(heading);
  
  // 移動速度
  var speed = position.coords.speed;
  $('#speed').html(speed);
 },function(error){
  var errorMsg = [
   "UNKNOWN_ERROR",
   "PERMISSION_DENIED",
   "POSITION_UNAVAILABLE",
   "TIMEOUT"
            ];
//        console.log("Error " + error.code + ":" + errorMsg[error.code]);
 },
  {
   enableHighAccuracy: true,
   timeout: 8000,
   maximumAge: 0 
  }
 );

HTML

緯度



経度



位置情報の誤差



高度



高度の誤差



移動速度

サンプルページ




*** 2015/2/6更新 ***

早速Androidアプリに組み込んでみました！

速度の単位がm/sなのでkm/hに変換してあります。

[単位変換]m/s→km/h

1 [m/s] = 1/1000 [km] * 1/3600 [h] = 3.6 [km/h]

var kmph = Math.round(speed * 3.6);
$('#speed').html(kmph);

誤差3.9mとめちゃくちゃ精度いいじゃないですか∑(￣□￣;)！？

これなら実用レベルとまでは言いませんが、個人で楽しむならば十分使えそうですね！

http://miz7maki.blogspot.com/2015/01/cordovagps1-html5.html[自作アプリ/Cordova]GPSスピードメーター制作(1) --- HTML5で位置情報を常に取得する