div内でピクセルで指定した地点を座標に変換

地図を表示するdiv要素の左上を原点とした場合のピクセル座標で指定した地点を緯度経度として取得します。GMap2クラスで用意されているfromDivPixelToLatLngメソッドを使います。

fromDivPixelToLatLng(pixel:GPoint)

ドラッグ可能な地図を含む DIV のピクセル座標から地理的座標を計算します。
このメソッドは、GOverlay インターフェースを拡張しないカスタム オーバー
レイとの対話的な操作を実装する際に、役立つ場合があります。このメソッド
で目的の出力が得られない場合には、代わりにfromContainerPixelToLatLng 
メソッドを試してください。

戻り値:
  GLatLng

引数にGPointクラスのオブジェクトを指定すると、その位置に表示されている地点の座標をGLatLngクラスのオブジェクトとして返します。

実際には次のように記述します。

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(34.385663,132.460098), 12);

var latlng = map.fromDivPixelToLatLng(new GPoint(100, 80));
var lat = latlng.lat();
var lng = latlng.lng();

この場合、地図が表示されているdiv要素の左上を原点として、右方向へ100ピクセル、下方法へ80ピクセルの位置の座標を取得しています。

サンプルプログラム

では試してみます。

code3_1.js

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.fromDivPixelToLatLng(new GPoint(100, 100));
  var latlng2 = map.fromDivPixelToLatLng(new GPoint(300, 100));
  var latlng3 = map.fromDivPixelToLatLng(new GPoint(100, 300));
  var latlng4 = map.fromDivPixelToLatLng(new GPoint(300, 300));
  var latlng5 = map.fromDivPixelToLatLng(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));
}

map3_1.html

<!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>サンプル：div内でピクセルで指定した地点を座標に変換</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/code3_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width:400px;height:400px;background:#ff0000;"></div>
    <form>
    <p>
    <input type="button" id="markerbtn" value="Marker" onclick="drawFiveMarker()" />
    </p>
    </form>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p3-1

地図の下に表示されている「Marker」ボタンを押すと、地図上に5つのマーカーを表示します。このマーカーを表示する座標をピクセルで指定した地点を座標に変換して取得しています。

p3-2

なおfromContainerPixelToLatLngメソッドの場合は地図をドラッグして移動した後で再度ボタンを押すと、その時点で改めて座標を取得してマーカーを設置しますが、fromDivPixelToLatLngメソッドの場合は地図をドラッグして移動した後でも取得する座標は変わりがありません。この使い分けの方法が現時点でよくわかっていないため、分かり次第再度更新します。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。