グラウンドオーバーレイの表示

広告

地図上に画像を表示するグラウンドオーバーレイの表示方法を確認します。地図上に配置されますので地図の移動に合わせて画像も移動しますし、ズームレベルに応じて画像も拡大縮小されます。

グラウンドオーバーレイはGGroundOverlayクラスで定義されており、コンストラクタ関数は次のように定義されています。 

GGroundOverlay(imageUrl:String, bounds:GLatLngBounds)

画像の URL とその境界からグラウンド オーバーレイを作成します。

1番目の引数に表示する画像のURLを指定します。2番目の引数には画像を表示する範囲を表すGLatLngBoundsクラスのオブジェクトを指定します。

GLatLngBoundsクラスは2つのGLatLngクラスのオブジェクトを保持するクラスです。それぞれの座標は南西(左下)と北東(右上)の座標を表します。 

var bounds = new GLatLngBounds(南西の座標, 北東の座標);

画像をGLatLngBoundsクラスのオブジェクトで指定した座標の範囲に合わせるように設置します。

具体的には次のように記述します。 

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(33.591243,130.412006), 13);

var sw = new GLatLng(33.584772,130.415268);
var ne = new GLatLng(33.587936,130.400805);
var bounds = new GLatLngBounds(sw, ne);
var goverlay = new GGroundOverlay("./sample.png", bounds);

map.addOverlay(goverlay);

※グラウンドオーバーレイなどのオーバーレイを地図に追加する方法については「オーバーレイ(GOverlay)」を参照して下さい。

サンプル

では試してみます。

code1_1.js 

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(33.591243,130.412006), 13);

    var sw = new GLatLng(33.58933,130.392866);
    var ne = new GLatLng(33.606086,130.402694);
    var bounds = new GLatLngBounds(sw, ne);
    var goverlay = new GGroundOverlay("./img/dentaku.png", bounds);

    map.addOverlay(goverlay);
  }
}

map1_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" xmlns:v="urn:schemas-microsoft-com:vml">
  <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_canvas" style="width: 400px; height: 400px"></div>
  </body>
</html>

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

p1-1

今回使用している画像のサイズと、表示箇所として指定した範囲が同じではないため、画像が引き伸ばされたように地図に貼り付けられています。

元の画像は次のようなものでした。

グラウンドオーバーレイの表示

地図を移動すれば地図に合わせて移動します。

p1-2

ズームレベルを変更すればズームレベルに合わせて拡大縮小して表示されます。

p1-3

サンプル

画像を元のサイズのまま地図上に表示させるには画像のサイズに合わせて表示する座標の範囲を計算する必要があります。下記のサンプルでは左下の座標と画像の幅と高さを指定すると右上の座標を計算して返す簡単な関数を使用して画像を元のサイズのままで表示するようにしています。

code1_2.js 

var map;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(33.591243,130.412006), 13);

    var sw = new GLatLng(33.58933,130.392866);
    var ne = createNELatLng(sw, 48, 48);

    var bounds = new GLatLngBounds(sw, ne);
    var goverlay = new GGroundOverlay("./img/dentaku.png", bounds);

    map.addOverlay(goverlay);
  }
}

/* 左下の座標、幅(pixel)、高さ(pixel)を指定し右上の座標を取得 */
function createNELatLng(latlng, w, h){
  var point = map.fromLatLngToContainerPixel(latlng);

  var x = point.x;
  var y = point.y;

  var nelatlng = map.fromContainerPixelToLatLng(new GPoint(x + w, y - h));

  return nelatlng;
}

map1_2.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" xmlns:v="urn:schemas-microsoft-com:vml">
  <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_2.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
  </body>
</html>

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

p1-4

指定した画像が元のサイズのまま表示されました。

( Written by Tatsuo Ikura )