ポリゴンの表示

広告

ポリゴンを作成し地図に表示する方法を確認します。マーカーと同じく地図上に複数のポリゴンを表示することができます。

ポリゴンはGPolygonクラスで定義されており、コンストラクタ関数は次のように定義されています。 

GPolygon(latlngs:GLatLng[], strokeColor?:String, strokeWeight?:Number, 
  strokeOpacity?:Number, fillColor?:Number, fillOpacity?:Number, 
  opts?:GPolygonOptions) 

頂点の配列からポリゴンを作成します。colors は HTML 方式の 16 進数で表し
た色 (#RRGGBB) を含む文字列として指定されます。weight はピクセル単位の
線の幅です。opacities は、0 - 1 の数値で指定されます。線はアンチエイリ
アスされて半透明になります。

ポリゴンは複数の座標を順につなぐことで作成されます。1番目の引数には座標を表すGLatLngクラスのオブジェクトの配列を指定して下さい。1番目の座標から2番目の座標、そして2番目の座標から3番目の座標へ線が引かれます。

ポリラインとの違いは各頂点によって形成された多角形の領域を塗りつぶす点です。

GLatLngクラスは緯度と経度の2つの値を保持するクラスで次のようにオブジェクトを作成します。 

var オブジェクト = new GLatLng(緯度, 経度);

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

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

var points = [
  new GLatLng(34.991261,135.730076),
  new GLatLng(34.997976,135.759945),
  new GLatLng(34.965979,135.772219),
  new GLatLng(34.991261,135.730076)
];
var polygon = new GPolygon(points);

map.addOverlay(polygon);

なお最初の頂点と最後の頂点は自動的には線が描かれません。その場合でも多角形として塗りつぶしは行われますが外周を全て描くには頂点の配列の最後に最初の点を追加して下さい。

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

Internet Explorer向けの設定

ポリラインの場合と同じくInternet Explorerでポリゴンを表示させるには次のように記述を行う必要があります。 

<!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">

</html>

これはVML名前空間をXHTMLドキュメントに含めているということなのですが、ポリラインを使用する場合にはこの記述を追加しておくようにして下さい。

サンプルプログラム

では試してみます。

code1_1.js 

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

    var points1 = [
      new GLatLng(34.991261,135.730076),
      new GLatLng(34.997976,135.759945),
      new GLatLng(34.965979,135.772219)
    ];

    var points2 = [
      new GLatLng(35.003355,135.742607),
      new GLatLng(35.009014,135.770159),
      new GLatLng(34.98604,135.779815),
      new GLatLng(34.963834,135.755997),
      new GLatLng(35.003355,135.742607)
    ];

    var polygon1 = new GPolygon(points1);
    var polygon2 = new GPolygon(points2);

    map.addOverlay(polygon1);
    map.addOverlay(polygon2);
  }
}

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

2つのポリゴンを表示しています。1つ目は3つの頂点を指定して三角形を表示しています。最初の頂点を最後に記述していないため、塗りつぶしは行われていますが三角形の1辺が描かれていません。2つ目は4つの頂点を指定して四角形を表示しています。5つ目の頂点として最初の頂点と同じ頂点を記述しているため閉じた四角形として描かれています。

( Written by Tatsuo Ikura )