古籏一浩のJavaScriptラボ ― 第60回

MapKit×JavaScriptでiPhone用GPSアプリ

2011年06月09日 16時59分更新

古籏一浩

ツイートする

　HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。前回に続き、NimbleKitを使った簡単な地図アプリの作り方を解説します。

　最近のWebブラウザーではHTML5の実装が進み、多くのブラウザーではGPSなどから位置情報を取得する「Geolocation API」を利用できます。Geolocation APIはNimbleKitでも利用できますが、実際にアプリケーション化して実行してみるとうまく動かない場合があります。

　そこで、今回はNimbleKitに用意されている機能を使って、地図上に現在地を表示する方法を紹介します。iPhone標準の地図アプリのようなピン（マーカー／アノテーション）も表示してみましょう。

現在地を取得し地図上に表示

　NimbleKitでは、現在地を求めるgetUserLocation()メソッドを定期的に呼び出すことで位置情報を取得できます。getUserLocation()の引数には取得に成功したときに呼び出す関数名を指定し、この関数に位置情報が文字列として返されます。位置情報は「緯度経度誤差速度」の4つの値が半角スペース区切りで返されるので、split(" ")として半角空白で分割し配列に格納します。

　位置情報を求めたら地図に反映させます。地図の表示位置は、前回説明したsetDisplayRegion()メソッド、もしくはsetCenterCoordinate()メソッドで設定します。地図の表示範囲（ズームレベル）をプログラムで制御したい場合はsetDisplayRegion()メソッドを、表示範囲はユーザーに任せて緯度・経度だけをプログラムで指定する場合はsetCenterCoordinate()メソッドを使います。setCenterCoordinate()メソッドの引数は、「緯度,経度,アニメーションフラグ」です。

　これで現在地が地図上に反映されるようになりますが、せっかくなので標準の地図アプリのような青い円で現在地を示すようにします。といっても簡単で、showUserLocation()メソッドの引数に"YES"を指定するだけです。

　実際のプログラムがサンプル1です。iOSシミュレーター上でもテストできます（現在地は大まかな位置になります）。


現在位置が青丸で表示される。これは標準で用意されている地図アプリでおなじみのもの

■サンプル1

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
#mapType {
  position: absolute;
  top: 410px;
  left: 10px;
}
#pos {
  position: absolute;
  top: 440px;
  left: 10px;
}
</style>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<script>
  var mapview = new NKMapView();
  mapview.init(0,0, 320, 400);
  mapview.setDisplayRegion(36.115144154001165, 137.94774770736694, 0.01, 0.01);
  mapview.showUserLocation("YES");
  mapview.show();
  setInterval("getPos()", 1000);
  function getPos(){
    mapview.getUserLocation("setPos");
  }
  function setPos(currentLocation){
    document.getElementById("pos").innerHTML = currentLocation;
    var newPos = currentLocation.split(" ");
    mapview.setDisplayRegion(newPos[0], newPos[1], 0.01, 0.01);
  }
</script>
<div id="mapType">
<a href="#" onclick="mapview.setMapType('standard')">通常の地図</a>｜
<a href="#" onclick="mapview.setMapType('satellite')">航空写真</a>｜
<a href="#" onclick="mapview.setMapType('hybrid')">地図＋写真</a>
</div>
<div id="pos">---</div>
</body>
</html>