タイルオーバーレイの表示/非表示の切り替え

広告

タイルオーバーレイを追加した後で表示と非表示を切り替える方法を確認します。

タイルオーバーレイのオブジェクトが表示されているかどうか確認するにはGTileLayerOverlayクラスで定義されているisHiddenメソッドを使います。 

isHidden() 

タイル レイヤー オーバーレイが非表示の場合に true を返します。それ以外の
場合は、false を返します。

現在タイルオーバーレイが表示されていればtrueを返し、表示されていなければfalseを返します。

非表示となっているタイルオーバーレイを表示するにはGTileLayerOverlayクラスで定義されているshowメソッドを使います。 

show()

以前に非表示にされた GTileLayerOverlay を表示します。

showメソッドを実行すると、タイルオーバーレイが非表示の場合に表示します。

表示されているタイルオーバーレイを非表示にするにはGTileLayerOverlayクラスで定義されているhideメソッドを使います。 

hide() 

見えないようにこのオーバーレイを非表示にしますが、オーバーレイのスタック
内の位置は維持します。

hideメソッドを実行すると、タイルオーバーレイが表示されている場合に非表示にします。

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

var copyrights = new GCopyrightCollection();

var tilelayer = new GTileLayer(copyrights, 0, 19);

tilelayer.getTileUrl = function(tile, zoom) { return "./img/sample.png"; };
tilelayer.isPng = function() { return true; };
tilelayer.getOpacity = function() { return 0.5; };

var tileoverlay = new GTileLayerOverlay(tilelayer);

map.addOverlay(tileoverlay);

if (tileoverlay.isHidden()){
  tileoverlay.show();
}else{
  tileoverlay.hide();
}

サンプルプログラム

では試してみます。

code5_1.js 

var tileoverlay;

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

    var copyrights = new GCopyrightCollection();
    var tilelayer = new GTileLayer(copyrights, 0, 19);

    tilelayer.getTileUrl = function(tile, zoom) { return "./img/tile.png"; };
    tilelayer.isPng = function() { return true; };
    tilelayer.getOpacity = function() { return 0.3; };

    tileoverlay = new GTileLayerOverlay(tilelayer);

    map.addOverlay(tileoverlay);
  }
}

function onoff() {
  if (tileoverlay.isHidden()){
    tileoverlay.show();
    document.getElementById("onoffbtn").value = "非表示";
  }else{
    tileoverlay.hide();
    document.getElementById("onoffbtn").value = "表示";
  }
}

map5_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/code5_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>

    <form>
    <p>
    <input type="button" id="onoffbtn" value="非表示" onclick="onoff()" />
    </p>
    </form>
</body>
</html>

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

p5-1

では地図下の「非表示」ボタンを押して下さい。

p5-2

タイルオーバーレイが非表示になります。

地図下の「表示」ボタンを押せば再度表示されます。

p5-3

( Written by Tatsuo Ikura )