コンテナ内でピクセルで指定した地点を座標に変換
広告
地図を含むコンテナの左上を原点とした場合のピクセル座標で指定した地点を緯度経度として取得します。GMap2クラスで用意されているfromContainerPixelToLatLngメソッドを使います。
fromContainerPixelToLatLng(pixel:GPoint)
ページ上に地図を含む DOM 要素内でピクセル座標で指定された地点を、地理的 座標で計算します。カスタムコントロールと地図との対話的な操作を実装する 際に、このメソッドが役立ちます。 戻り値: GLatLng
引数にGPointクラスのオブジェクトを指定すると、その位置に表示されている地点の座標をGLatLngクラスのオブジェクトとして返します。
実際には次のように記述します。
var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(34.385663,132.460098), 12); var latlng = map.fromContainerPixelToLatLng(new GPoint(100, 80)); var lat = latlng.lat(); var lng = latlng.lng();
この場合、地図が表示されているコンテナの左上を原点として、右方向へ100ピクセル、下方法へ80ピクセルの位置の座標を取得しています。
サンプル
では試してみます。
var map; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-38.362118,145.357361), 10); } } function drawFiveMarker(){ map.clearOverlays(); var latlng1 = map.fromContainerPixelToLatLng(new GPoint(100, 100)); var latlng2 = map.fromContainerPixelToLatLng(new GPoint(300, 100)); var latlng3 = map.fromContainerPixelToLatLng(new GPoint(100, 300)); var latlng4 = map.fromContainerPixelToLatLng(new GPoint(300, 300)); var latlng5 = map.fromContainerPixelToLatLng(new GPoint(200, 200)); map.addOverlay(new GMarker(latlng1)); map.addOverlay(new GMarker(latlng2)); map.addOverlay(new GMarker(latlng3)); map.addOverlay(new GMarker(latlng4)); map.addOverlay(new GMarker(latlng5)); }
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>サンプル:コンテナ内でピクセルで指定した地点を座標に変換</title> <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false" type="text/javascript" charset="utf-8"></script> <script src="./js/code1_1.js" type="text/javascript"></script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map" style="width:400px;height:400px;"></div> <form> <p> <input type="button" id="markerbtn" value="Marker" onclick="drawFiveMarker()" /> </p> </form> </body> </html>
ではブラウザで上記のURLを見てみます。
地図の下に表示されている「Marker」ボタンを押すと、地図上に5つのマーカーを表示します。このマーカーを表示する座標をピクセルで指定した地点を座標に変換して取得しています。
( Written by Tatsuo Ikura )
Profile
著者 / TATSUO IKURA
プログラミングや開発環境構築の解説サイトを運営しています。