地図の中心にアノテーションを表示する
現在地にアノテーションを表示してもあまり役に立ちませんので、今度はボタンをタップすると地図の中心位置にアノテーションを表示するようにします。地図をスクロールさせてボタンをタップすれば希望の位置にアノテーションを表示できるので、目印として利用できます。
地図の中心位置と範囲は、getDisplayRegion()メソッドで求めます。getDisplayRegion()メソッドを呼び出すと、経度緯度と表示範囲の4つの値が,（カンマ）区切りの文字列で返されますので、split(",")でそれぞれの値を取り出し、配列にします。現在地を求めるgetUserLocation()の場合は半角スペース区切りでしたが、getDisplayRegion()ではカンマ区切りです。NimbleKitはメソッドごとに形式が統一されていないので、間違えないよう気を付けてください。
緯度・経度を取得できれば、addAnnotation()メソッドを使ってアノテーションを表示して完成です。アノテーションは1つだけでなく複数表示できるので、あまりに数が増えるとまとめて消したい場合もあるでしょう。おまけとして、表示されているアノテーションをすべて消去するボタンも追加します。アノテーションは、clearAnnotations()メソッドでまとめて消去できます。
ここまでをまとめたのがサンプル3です。
地図をドラッグしてからボタンをクリックすると地図の中心にアノテーションが表示される
■サンプル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>
