ホ−ム » 基本サンプル » 吹き出しに画像を表示する

吹き出しに画像を表示する

実行結果

次の例では吹き出しに画像を表示します。
Imageオブジェクトのonloadを利用することにより、ブラウザに依存せず吹き出し内に画像を表示することができます。

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/widget/onloadedMsgInfo.html

ソースコードと解説

吹き出しを表示するには、ZDC.MsgInfoクラスと、ZDC.MapクラスのaddWidget()を利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="http://test.api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,shape.js,search.js&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

    function loadMap() {
      var map = new ZDC.Map(document.getElementById('ZMap'));
      var url = 'http://support.e-map.ne.jp/manuals/V20/image/msginfo/loadedMsgInfo.png';

      /*比較のためここではブラウザキャッシュを残さない*/
      var _url = url + '?' + Math.floor( Math.random() * 1000000 );

      /*吹き出しを作成する*/
      var msg = new ZDC.MsgInfo(
          map.tlToLatLon(new ZDC.TL(200, 100)),
          {html: '<div>通常</div><img src=' + _url + '>'}
      );
      map.addWidget(msg);
      msg.open();

      var img = new Image();
      /*比較のためここではブラウザキャッシュを残さない*/
      img.src = url + '?' + Math.floor( Math.random() * 1000000 );

      /*画像をロードしてから吹き出しを作成する*/
      img.onload = function() {
          var msg = new ZDC.MsgInfo(
            map.tlToLatLon(new ZDC.TL(200, 500)),
            {html: '<div>onload後</div><img src=' + this.src + '>'}
          );
          map.addWidget(msg);
          msg.open();
      }
    }

</script>
//]]>
</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style=" top:0px; left:0px; width:100%; height:100%; position:absolute;"></div>
</body>
</html>