ズームに連動するユーザーウィジェット

実行結果

次の例では、ズームに連動するユーザーウィジェットを表示します。

ソースコードと解説

ユーザーウィジェットを表示するには、ZDC.UserWidgetクラスと、ZDC.MapクラスのaddWidget(widget)を利用します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<script type="text/javascript">
  // オブジェクト
  var map, uw1, uw1_TOP_LEFT, uw1_BOTTOM_RIGHT;

  // 中心点の緯度経度（東京駅）
  const lat = 35.681406, lng = 139.767132;

  // ZMALoader
  ZMALoader.setOnLoad(function (mapOptions, error) {
    if (error) {
      console.error(error)
      return
    }

    // マップオプションをデフォルト値から変更する
    mapOptions.center = new ZDC.LatLng(lat, lng); // 中心点の緯度経度を設定

    // 地図を生成
    map = new ZDC.Map(
      document.getElementById('ZMap'),
      mapOptions,
      function() {
        // Success callback

        /* 重畳する画像のパス */
        var IMAGE_PATH = '/img/widget_sample.png';
        /* ブラウザキャッシュを残さない */
        var _IMAGE_PATH = IMAGE_PATH + '?' + Math.floor( Math.random() * 1000000 );
        /* 重畳する画像の左上緯度経度 */
        uw1_TOP_LEFT = map.getCenter();
        /* 初期表示の画像の大きさ */
        var a_point = map.latlngToPoint(uw1_TOP_LEFT);
        var b_point = new ZDC.Point(a_point.x + 160, a_point.y + 120);
        /* 重畳する画像の右下緯度経度 */
        uw1_BOTTOM_RIGHT = map.pointToLatLng(b_point);
        /* ユーザーウィジェットの作成 */
        uw1 = new ZDC.UserWidget(
          uw1_TOP_LEFT,
          {htmlSource: '<img id="uw1_img" style="width: '+ (b_point.x - a_point.x) +'px" src=' + _IMAGE_PATH + '>'}
        );
        /* ユーザーウィジェットを追加 */
        map.addWidget(uw1);
        /* ★ズームに連動するイベント作成 */
        map.addEventListener('zoom_changed',uw1_changed);

      },
      function() {
        // Failure callback
      }
    );
  });

  /* ★ズーム時の画像の大きさを、緯度経度で指定 */
  function uw1_changed() {
    /* 初期表示の緯度経度より、画像の大きさ取得 */
    var a_point = map.latlngToPoint(uw1_TOP_LEFT);
    var b_point = map.latlngToPoint(uw1_BOTTOM_RIGHT);
    /* ユーザーウィジェットの大きさを反映 */
    document.getElementById('uw1_img').style.width = (b_point.x - a_point.x) + 'px';
  }
</script>
</head>
<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
</body>
</html>