コンテンツにスキップ

ズームレベルの変更

このページでは以下の方法について説明しています。

  • 地図のズームレベルを変更する方法
  • ズームレベルを1段階ずつ切り替える方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

地図のズームレベルを変更する

  1. 地図を初期化します
  2. setZoomLevel()関数（ Map クラス ）を用いて地図のズームレベルを変更します
サンプルコード
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ズームレベルの変更</title>
        <!-- APIの呼び出し -->
        <script src="https://{HOST}/{CID}/v2/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
        <script>
            let map = null;
            function initMap(){
                // (1) 地図を初期化
                map = new mapscript.Map('{CID}', {
                    target: '#map', 
                    center: new mapscript.value.LatLng(35.681109, 139.767165), 
                    zoomLevel: 15 
                });

            }

            // （2）指定した地点へ移動
            function setZoomLevel() {
                map.setZoomLevel(10);
            }
        </script>
    </head>

    <!-- 初期化関数の呼び出し -->
    <body onload="initMap()">
        <div id="map" style="height: 500px; width: 500px;"></div>
        <input type="button" value="ズームレベルを10に変更" onclick="setZoomLevel()"/>
    </body>
</html>

ズームレベルを1段階ずつ切り替える

ズームレベルを１段階ずつ変更したい場合は、以下の方法で実現が可能です。

サンプルコード
// ズームレベルを１上げる
map.zoomIn(); 

// ズームレベルを１下げる
map.zoomOut(); 

// 現在のズームレベルを取得する
map.getZoomLevel();

ズームレベルについて

ズームレベルの最小値は6、最大値は19となっています。

関連ページ