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