自分用にGPSスピードメーターを作ってみようかなと思ったので、その過程をメモ書き程度に。
私はAndroidアプリ開発にApache Cordova(Phonegap)を使っているので、HTMLでさくっと位置情報取得できないかなーと調べてみたところ、ありましたw
[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とめちゃくちゃ精度いいじゃないですか∑( ̄□ ̄;)!?
これなら実用レベルとまでは言いませんが、個人で楽しむならば十分使えそうですね!