このページの本文へ

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

MapKitなら4行で作れるiPhone用地図アプリ

2011年06月03日 11時16分更新

古籏一浩

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

表示する地図の種類を指定する

 基本的な地図が表示できるようになったので、今度は地図の種類を切り替えてみます。地図の切り替えはsetMapType()メソッドを使い、引数には以下の種類を指定できます。

standard 地図
satellite 航空写真
hybrid 地図+航空写真

 たとえば以下の場合は地図+航空写真が表示されます。

mapview.setMapType("hybrid");

 実際のスクリプトはサンプル2です。iOSシミュレーターで確認すると以下のようになります。

【図】MapView02/1.jpg

■サンプル2[HTML]

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<script>
  var mapview = new NKMapView();
  mapview.init(0,0, 320, 480);
  mapview.setDisplayRegion(36.115144154001165, 137.94774770736694, 0.1, 0.1);
  mapview.setMapType("hybrid");
  mapview.show();
</script>
</body>
</html>

 サンプル2を少し改良して、ユーザーが地図の種類を切り替えるようにしてみましょう。HTMLに地図の種類を示すテキストを追加し、クリックイベントを設定します。クリックイベントが発生したら地図を切り替えるだけです(サンプル3)。

【図】MapView02/3.jpg 【図】MapView02/4.jpg
【図】MapView02/5.jpg

■サンプル3[HTML]

<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">
#mapType {
  position: absolute;
  top: 410px;
  left: 10px;
}
</style>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<script>
  var mapview = new NKMapView();
  mapview.init(0,0, 320, 400);
  mapview.setDisplayRegion(36.115144154001165, 137.94774770736694, 0.1, 0.1);
  mapview.show();
</script>
<div id="mapType">
<a href="#" onclick="mapview.setMapType('standard')">通常の地図</a><a href="#" onclick="mapview.setMapType('satellite')">航空写真</a><a href="#" onclick="mapview.setMapType('hybrid')">地図+写真</a>
</div>
</body>
</html>
Web Professionalトップページバナー

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

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

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