ダブルクリック／ダブルタップで地図を拡大する

実行結果

次の例では、ダブルクリック／ダブルタップで地図を拡大します。

ソースコードと解説

ダブルクリック／ダブルタップで地図を拡大するには、ZDC.MapクラスのaddEventListener()とgetZoom()／setZoom()を利用します。

<!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, tapCount;

  // 中心点の緯度経度（東京駅）
  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
        // コントロールを追加する
        // 左上 拡大縮小ボタン
        map.addControl(new ZDC.ZoomButton('top-left'));
        // 右上 コンパス
        map.addControl(new ZDC.Compass('top-right'));
        // 左下 スケールバー
        map.addControl(new ZDC.ScaleBar('bottom-left'));

        /* 地図をダブルクリックしたときの動作 */
        map.addEventListener('dblclick', function( event ) {
          // イベント発生時の値を取得 event={String(イベント名), LatLng(緯度経度), Point(ピクセル座標)}
          // 例 event = {type: "click", latlng: f, point: a}
          mapZoom(event);
        } ) ;

        /* 地図をタップしたとき(地図上で指を離した時)の動作 */
        map.addEventListener('touchend', function( event ) {
          // イベント発生時の値を取得 event={String(イベント名), LatLng(緯度経度), Point(ピクセル座標)}
          // 例 event = {type: "click", latlng: f, point: a}
          doubletap(event);
        });
      },
      function() {
        // Failure callback
      }
    );
  });

  /* ダブルタップ判定処理 */
  function doubletap(event) {
    if( !tapCount ) {
          /* シングルタップ */
          tapCount++;

          setTimeout( function() {
              tapCount = 0;
          }, 350 ) ;

      } else {
          /* ダブルタップ */
          tapCount = 0;

          mapZoom(event);
      }
  };

  /* ★クリック／タップ地点を中心に地図を拡大 */
  function mapZoom(event) {
    map.setCenter(event.latlng);
    map.setZoom(map.getZoom() + 1);
  }

</script>
</head>

<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
</body>
</html>