色/太さ/透明度の設定

広告

GPolygonクラスのコンストラクタ関数では2番目から6番目の引数で色/太さ/透明度の設定を行うことができます。 

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

2番目の引数では線の色を表す文字列を指定します。また5番目の引数では塗りつぶしの色を表す文字列を指定します。文字列は#RRGGBBの形式で指定して下さい。例えば赤色を表すには"#ff0000"を指定します。#RRGGBBの形式での色のサンプルについては「値の単位と記述方法」を参照して下さい。

3番目の引数にはピクセル単位で線の太さを指定します。

4番目の引数には線の色の透明度を0から1までの数値で指定します。また6番目の引数には塗りつぶしの色の透明度を0から1までの数値で指定します。0に近づくほど透明に近くなり、1に近づくほど不透明に近くなります。

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

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, "#ff00ff", 4, 0.5, "#ff0000", 0.2);

map.addOverlay(polygon);

上記は線の色が"ff00ff"、線の太さが4ピクセル、線の透明度が0.5、塗りつぶしの色が"ff0000"、塗りつぶしの透明度が0.2のポリゴンを表示します。

サンプルプログラム

では試してみます。

code2_1.js 

var map;

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

    dispPolygon(0.5)
  }
}

function setOpaLevel() {
  map.clearOverlays();

  var opalevel = document.getElementById("opalevel").value;
  dispPolygon(parseFloat(opalevel));
}

function dispPolygon(opalevel){
  var points1 = [
    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 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, "#ff0000", 10, 0.5, "#f0e68c", opalevel);
  var polygon2 = new GPolygon(points2, "#0000ff", 20, 0.5, "#008f8f", opalevel);

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

map2_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/code2_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
    <form>
    <p>
    Opacity：<input type="text" id="opalevel" size="5" value="0.5" />
    <input type="button" id="opabtn" value="変更" onclick="setOpaLevel()" />
    </p>
    </form>
  </body>
</html>

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

p2-1

今回は塗りつぶしの透明度だけ変更可能にしています。多角形の外周の色が中央を挟んで異なっているのは、内部の塗りつぶしの色が外周の半分の部分まで影響しているためのようです。では地図下のテキストボックスに0.2と入力して「変更」ボタンを押して下さい。

p2-2

今度は地図下のテキストボックスに0.9と入力して「変更」ボタンを押して下さい。

p2-3

このように0に近づくほど透明に近くなり、1に近づくほど不透明になります。

( Written by Tatsuo Ikura )