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

広告

座標で指定した地点をdiv要素の左上を原点とした場合の幅と高さの値として取得する方法を確認します。GMap2クラスで用意されているfromLatLngToDivPixelメソッドを使います。 

fromLatLngToDivPixel(latlng:GLatLng) 

ドラッグ可能な地図を含む DOM 要素内で指定された地理的地点を、ピクセル座
標で計算します。このメソッドは、カスタム オーバーレイに GOverlay.redraw() 
メソッドを実装する際に、そのオーバーレイを配置するために必要です。

戻り値:
  GPoint

引数にGLatLngクラスのオブジェクトを指定すると、その座標が表す地点がdiv要素の左上を原点とした場合の幅と高さの値を持つGPointクラスのオブジェクトとして返します。

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

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

var point = map.fromLatLngToDivPixel(new GLatLng(34.385663,132.460098));
var px = point.x;
var py = point.y;

この場合、指定した座標が示す位置について、地図が表示されているコンテナの左上を原点とした場合の幅と高さで取得します。

サンプルプログラム

では試してみます。

code4_1.js 

var map;
var latlng;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(-38.362118,145.357361), 10);
  }

  latlng = new GLatLng(-38.362118,145.357361)
  map.addOverlay(new GMarker(latlng));

  getLatLng();
}

function getLatLng(){
  var point = map.fromLatLngToDivPixel(latlng);
  document.getElementById("x").value = point.x;
  document.getElementById("y").value = point.y;
}

map4_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/code4_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="getbtn" value="Get" onclick="getLatLng()" />
    x：<input type="text" id="x" size="10" value="" />
    y：<input type="text" id="y" size="10" value="" />
    </p>
    </form>
  </body>
</html>

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

p4-1

地図の中に設置されているマーカーの座標を地図内の左上地点からのピクセル値として取得し表示します。

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

( Written by Tatsuo Ikura+ )

Facebook Page