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

MapKit×JavaScriptでiPhone用GPSアプリ

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

古籏一浩

ツイートする

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

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

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

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

■サンプル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>