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

実行結果

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

ソースコードと解説

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,shape.js,search.js&enc=EUC" type="text/javascript"></script>
<script type="text/javascript">


    function loadMap() {
      var map = new ZDC.Map(document.getElementById('ZMap'));
      var url = '../../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 + '>'}
      );

      /* スケールバーを作成 */
      var scale = new ZDC.ScaleBar();

      /* スケールバーを表示 */
      map.addWidget(scale);

      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>
</head>

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