自分用に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とめちゃくちゃ精度いいじゃないですか∑(￣□￣;)！？
これなら実用レベルとまでは言いませんが、個人で楽しむならば十分使えそうですね！
です。
Epson iPrint 
.webp)
