このページの本文へ

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

MapKit×JavaScriptでiPhone用GPSアプリ

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

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

タッチした場所にアノテーションを表示する

 最後に、地図の中心ではなく、地図上のタッチされた場所にアノテーションを表示してみましょう。

 NimbleKitでは、地図がタッチされると、自動的にmapTouchedAtCoordinates関数が呼び出されます。mapTouchedAtCoordinates関数にはタッチされた緯度・経度が引数に渡されるので、この緯度・経度の値を利用してaddAnnotation()メソッドでアノテーションを表示します。

 実際のプログラムはサンプル4です。地図上でタッチするとアノテーションが追加されます。アノテーションは無制限に追加でき、実際に多数追加してもそれほど低速にはなりません。iPhone 4では2000個程度のアノテーションを表示してもそれなりに動作しました。このサンプルを改造し、タッチされたらローカルストレージやSQLiteを使って位置情報を保存する処理を追加してもおもしろいでしょう。

【図】5.jpg

■サンプル4

<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">
#registForm {
  position: absolute;
  top: 410px;
  left: 10px;
}
#pos {
  position: absolute;
  top: 440px;
  left: 10px;
}
</style>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<form id="registForm">
<input type="button" value="中心地をマークする" id="registButton">
<input type="button" value="全て消去する" id="clearButton">
</form>
<div id="pos">---</div>
<script>
  var count = 0;
  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();
  var timerID = setInterval("getPos()", 1000);
  function getPos(){
    mapview.getUserLocation("setPos");
  }
  function setPos(currentLocation){
    document.getElementById("pos").innerHTML = currentLocation;
    var newPos = currentLocation.split(" ");
    lat = newPos[0];  // 緯度
    lng = newPos[1];  // 経度
    mapview.setDisplayRegion(lat, lng, 0.01, 0.01);
    if (parseFloat(newPos[0]) != 0){
      clearInterval(timerID);
    }
  }
  // 登録ボタンの処理
  document.getElementById("registButton").onclick = function(){
    var pos = mapview.getDisplayRegion();
    var coords = pos.split(",");
    var lat = coords[1];
    var lng = coords[0];
    mapview.addAnnotation(lat, lng ,"myPoint"+count, "秘密の場所");
    document.getElementById("pos").innerHTML = lat+","+lng;
    count = count + 1;
  }
  // 消去ボタンの処理
  document.getElementById("clearButton").onclick = function(){
    mapview.clearAnnotations();
  }
  // タッチした場所にアノテーションを表示
  function mapTouchedAtCoordinates(lat, lng){
    mapview.addAnnotation(lat, lng ,"myPoint"+count, "秘密の場所");
    document.getElementById("pos").innerHTML = lat+","+lng;
    count = count + 1;
  }
</script>
</body>
</html>

 次回はNimbleKitのImageViewerを使って簡単なフォトアルバムを作成します。お楽しみに。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く