このページの本文へ

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

MapKit×JavaScriptでiPhone用GPSアプリ

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

古籏一浩

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

地図の中心にアノテーションを表示する

 現在地にアノテーションを表示してもあまり役に立ちませんので、今度はボタンをタップすると地図の中心位置にアノテーションを表示するようにします。地図をスクロールさせてボタンをタップすれば希望の位置にアノテーションを表示できるので、目印として利用できます。

 地図の中心位置と範囲は、getDisplayRegion()メソッドで求めます。getDisplayRegion()メソッドを呼び出すと、経度緯度と表示範囲の4つの値が,(カンマ)区切りの文字列で返されますので、split(",")でそれぞれの値を取り出し、配列にします。現在地を求めるgetUserLocation()の場合は半角スペース区切りでしたが、getDisplayRegion()ではカンマ区切りです。NimbleKitはメソッドごとに形式が統一されていないので、間違えないよう気を付けてください。

 緯度・経度を取得できれば、addAnnotation()メソッドを使ってアノテーションを表示して完成です。アノテーションは1つだけでなく複数表示できるので、あまりに数が増えるとまとめて消したい場合もあるでしょう。おまけとして、表示されているアノテーションをすべて消去するボタンも追加します。アノテーションは、clearAnnotations()メソッドでまとめて消去できます。

 ここまでをまとめたのがサンプル3です。

【図】3.png 【図】4.png
地図をドラッグしてからボタンをクリックすると地図の中心にアノテーションが表示される

■サンプル3

<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();
  }
</script>
</body>
</html>
Web Professionalトップページバナー

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

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

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