株式会社ライブキャストロゴ 株式会社ライブキャスト

iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（履歴をMap表示編）

2009年7月24日 google, iPhone, javascript, Stray Child

ここ最近、通勤の行き帰りはiPhoneとのにらめっこが続いてます・・・

flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（history画面作成編）で、履歴画面を作りました。

履歴画面の住所の表示をリンクにして、地図画面に遷移できるようにします。地図画面を表示する際に、住所の吹き出しを初期表示する仕様にします。

まず、一覧に表示されている住所をリンクに変更します。

javascriptで住所一覧を作っているところを少しなおします。

1
2
3
4
5
6
7
8
9
10
for (i = 0; i < resultSet.rows.length; i++) {
 var address = tonosamart.evalJson(resultSet.rows.item(i).dat);
 
 if (address) {
  html += "<div><p><a href='../map/?latlng=" +
   splitLatlng(address.name)[0] + "," +
   splitLatlng(address.name)[1] + "'>" +
   address.Placemark[0].address + "</a></p></div>";
 }
}

地図画面にパラメータで緯度・経度を渡すようにしています。

次は、そのパラメータを受けた地図画面の方を修正します。

1
2
3
4
5
6
7
8
9
10
11
if (window.location.search) {
 var arr = window.location.search.substr(8).split(',');
 
 if (arr) {
  if (arr.length === 2) {
   lat = arr[0];
   lng = arr[1];
   hasParam = true;
  }
 }
}

履歴を確認する場合は、現在地の表示機能をOFFにするようにします。初期化処理の引数（hasParam）にしてその状態を渡します。

1
2
function initialize(hasParam, isDbConnect) {
 initGeoLocation(!hasParam, isDbConnect);

GPSを監視する部分のロジックは関数化しました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function initGeoLocation(isWatch, isDbConnect) {
 if (isWatch) {
  if (navigator != null && navigator.geolocation != null) {
   id = navigator.geolocation.watchPosition(
    function(e) {
     onLocationChanged(e, isDbConnect);
    }
   );
  }
 }
 else {
  if (id != null) {
   id = navigator.geolocation.clearWatch(id);
  }
 }
}

バッテリーの減りも考慮して、極力、GPSを監視しないように、ON/OFFをいろんなところで切り替えられるようにするためです。

最後に、画面初期表示時に住所を表示するようにして、完成です。

1
2
3
if (hasParam) {
 getAddress(latlng, isDbConnect);
}

ここまでで、こんなのができました。もし良かったら、試してみてください！
iPhone GPS Sample

関連記事

»
«