このページの本文へ

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

MapKit×JavaScriptでiPhone用GPSアプリ

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

古籏一浩

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

現在地にアノテーションを表示する

 現在地が取得できたので、今度は地図アプリでおなじみのピン(マーカー)を表示してみましょう。MapKitでは「アノテーション」と呼んでいますので、本記事でも以降はアノテーションと表記します。

 アノテーションを表示する前に、位置情報が正しく取得できなかった場合の処理(エラー処理)を追加します。Geolocation APIとは異なり、NimbleKitにはエラーを処理するコールバックがないので、位置が正しく取得できなかった場合、基本的には何もできません。中途半端に取得できてしまった場合、getUserLocation()で呼び出される関数に渡される緯度・経度などの値は0になります。そこで、すべての値が0だったら位置を再度取得するか、無視する処理が必要になります。

 サンプル2では、緯度が0以外だったら正しく取得できたものとして処理しています。また、バッテリーの消費を抑えるために、現在地の取得に一度成功したら繰り返し位置を取得しないようタイマーを停止させています。あまり頻繁に位置情報を取得しようとするとバッテリーの消費が激しくなり、使用できる時間が短くなってしまうので、不必要に位置情報を求めるのは避けた方がよいでしょう。

 位置情報のエラー処理ができたのでアノテーションを表示します。ボタンがタップされたら現在地にアノテーションを表示します。アノテーションはaddAnnotation()メソッドで表示できます。addAnnotation()メソッドの引数は「緯度,経度,タイトル,内容」です。

 エラー処理とアノテーションを追加したのがサンプル2です。

【図】2.jpg
ボタンをクリックすると上から赤いアノテーションが落下し現在地に表示される

■サンプル2

<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">
</form>
<div id="pos">---</div>
<script>
  var lat;  // 緯度
  var lng;  // 経度
  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(){
    mapview.addAnnotation(lat, lng ,"myPoint", "秘密の場所");
  }
</script>
</body>
</html>
Web Professionalトップページバナー

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

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

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