コントロールを削除する

実行結果

次の例では、ボタンを押した際にコントロールを削除します。

ソースコードと解説

コントロールを削除するには、ZDC.MapクラスのremoveControl(control)を利用します。

<!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, top_left_control, top_right_control, bottom_left_control;

  // 中心点の緯度経度（東京駅）
  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

        /* Control */
        // 左上
        top_left_control = new ZDC.ZoomButton('top-left');
        map.addControl(top_left_control);

        // 右上
        top_right_control = new ZDC.Compass('top-right');
        map.addControl(top_right_control);

        // 左下
        bottom_left_control = new ZDC.ScaleBar('bottom-left');
        map.addControl(bottom_left_control);

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

  /* ★コントロールを削除 */
  function removeZoomButton() {
      map.removeControl(top_left_control);
  };
  function removeCompass() {
      map.removeControl(top_right_control);
  };
  function removeScaleBar() {
      map.removeControl(bottom_left_control);
  };
</script>
</head>

<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
  <div class="mb-2" id="IBox">
    <input type="button" value="removeZoomButton" onclick="removeZoomButton();">
    <input type="button" value="removeCompass" onclick="removeCompass();">
    <input type="button" value="removeScaleBar" onclick="removeScaleBar();">
  </div>
</body>
</html>