iOS 4.2×localStorageで作るGPSレコーダー (4/5)

2011年03月02日　13時00分更新

文●古籏一浩

ツイートする

記録したデータを地図に表示する

　サンプル01はGPSデータをlocalStorageに記録するだけのプログラムで、過去の履歴を調べる機能はありません。今度は、localStorageに記録したデータを個別にGoogleマップに表示するプログラムを作成します。

　記録されているGPSデータの総数を読み出し、表示するデータの番号を変数gpsNoに入れます。最初のGPSデータは1番目に記録されている（0番目ではない）ので「1」を入れます。データがたくさんあって途中から読み出したい場合は、「215」や「1969」のように数値を指定しても構いません。

var count = window.localStorage.getItem("jp.ascii.gpsDataCount") || 0;
var gpsNo = 1;  // 表示する位置データの番号

　HTMLにデータを表示するためのボタンを追加します。今回はシンプルに、「前のデータを表示」「次のデータを表示」の2つのボタンを用意し、それぞれにID名を設定します。

<input type="button" value="前のデータを表示" id="prevButton">
<input type="button" value="次のデータを表示" id="nextButton">

　各ボタンがクリックされたら、表示するデータの番号を示す変数gpsNoの値を増減させます。ただし、記録されたデータの範囲内に収まるようにし、その後Googleマップ上に表示する関数toMap()を呼び出します。

// 前のデータ表示ボタンが押された場合の処理
document.getElementById("prevButton").addEventListener("click", function(){
gpsNo--;
if (gpsNo < 1){ gpsNo = 1; }    // 最初のデータより前にならないように
toMap();
}, true);
// 次のデータ表示ボタンが押された場合の処理
document.getElementById("nextButton").addEventListener("click", function(){
gpsNo++;
if (gpsNo > count){ gpsNo = count; }    // 最後のデータまでしか表示しないように
toMap();
}, true);

　関数toMap()は、localStorageからデータを読み出します。データが存在しない場合（もしくは読み出し番号が不正）に備えて、以下のようにtry...catchでエラー処理をしておきます。

try{
var data = window.localStorage.getItem("jp.ascii.gpsData"+gpsNo).split(",");
}catch(e){ return; }

　あとはサンプル01と同様、緯度経度を指定してGoogleマップ上に表示します。実際のプログラムはサンプル02です。

■サンプル02[HTML]

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>記録済みのデータをマップ上に表示する</title>
<style type="text/css">
h1 { font-size:16pt; }
#pos, #msg { font-size:9pt; }
#gpsData { font-size:8pt;line-height:110%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
// 記録数を読み出す
var count = window.localStorage.getItem("jp.ascii.gpsDataCount") || 0;  // 保存してあるデータ数を読み出す。なければ0
var gpsNo = 1;  // 表示する位置データの番号
// ページが読み込まれたときの処理
window.addEventListener("load", function(){
document.getElementById("msg").innerHTML = "データは"+count+"個記録されています";
// グーグルマップ ver 3の構築と表示
var defPos = new google.maps.LatLng(36, 137); // 座標値はどこでもよい
gmap = new google.maps.Map(document.getElementById("map_canvas"), {
zoom : 17,
center : defPos,
mapTypeId : google.maps.MapTypeId.ROADMAP
});
gmarker = new google.maps.Marker({
positon : defPos,
map:gmap,
icon : "./arrow.png"
});
// 前のデータ表示ボタンが押された場合の処理
document.getElementById("prevButton").addEventListener("click", function(){
gpsNo--;
if (gpsNo < 1){ gpsNo = 1; }    // 最初のデータより前にならないように
toMap();
}, true);
// 次のデータ表示ボタンが押された場合の処理
document.getElementById("nextButton").addEventListener("click", function(){
gpsNo++;
if (gpsNo > count){ gpsNo = count; }    // 最後のデータまでしか表示しないように
toMap();
}, true);
}, true);
// 地図上に表示
function toMap(){
try{
var data = window.localStorage.getItem("jp.ascii.gpsData"+gpsNo).split(",");
}catch(e){ return; }
document.getElementById("msg").innerHTML = gpsNo+"番目のデータ";
var lat = data[0];  // 緯度
var lng = data[1];  // 経度
var dt = new Date(parseInt(data[2])); // 記録された時間の日付オブジェクトを生成
var M = dt.getMonth() + 1;  // 月を求める
var D = dt.getDate(); // 日にちを求める
var h = dt.getHours();  // 時を求める
var m = dt.getMinutes();    // 分を求める
var s = dt.getSeconds();    // 秒を求める
var tmsg = M+"月"+D+"日 "+h+"時"+m+"分"+s+"秒";
txt = lat+","+lng+"<br>"+tmsg+"<br>";
var mapPos = new google.maps.LatLng(lat, lng);
gmap.setCenter(mapPos);   // 地図の中心を現在地にする
gmarker.setPosition(mapPos);
document.getElementById("pos").innerHTML = txt;
}
</script>
</head>
<body>
<div id="map_canvas" style="width:90%;height:300px;border:1px solid black;"></div>
<div id="pos">lat, lng</div>
<div id="msg"></div>
<form>
<input type="button" value="前のデータを表示" id="prevButton">
<input type="button" value="次のデータを表示" id="nextButton">
</form>
</body>
</html>