いつもNAVI API マニュアル

実行結果

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

ソースコードと解説

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

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-JP">
<script src="//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">

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

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