表示する地図の種類を指定する
基本的な地図が表示できるようになったので、今度は地図の種類を切り替えてみます。地図の切り替えはsetMapType()メソッドを使い、引数には以下の種類を指定できます。
| standard | 地図 |
| satellite | 航空写真 |
| hybrid | 地図＋航空写真 |
たとえば以下の場合は地図＋航空写真が表示されます。
mapview.setMapType("hybrid");
実際のスクリプトはサンプル2です。iOSシミュレーターで確認すると以下のようになります。
■サンプル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）。
■サンプル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>
