地下街・駅構内詳細図内の階層を移動する

実行結果

次の例では、地下街・駅構内詳細図の階層を移動します。
地図をドラッグすると地図中心の地下街・駅構内詳細図情報を取得し階層ボタンを表示します。
ソースコードと解説

地下街・駅構内詳細図を表示するには、ZDC.Detailクラスと、ZDC.MapクラスのaddWidget()を利用します。
地下街・駅構内詳細図情報を取得するには、ZDC.Search.getByZmaps()のdetail_map_infoを利用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,search.js,detail.js,control.js&enc=UTF8"></script>

<script type="text/javascript">
    var map, scale, controlNormal;

    var defaultLatlon = new ZDC.LatLon(35.6864521, 139.7025495);

    /* 詳細図 */
    var detailLayer;

    function loadMap(options) {
      options = options || {};

        map = new ZDC.Map(
            document.getElementById('ZMap'),
            {
                latlon: defaultLatlon,
                /* 高解像度地図画像を利用する */
                mapType: ZDC.MAPTYPE_FLAT_LV20,
                zoom: 17
            }
        );

        /* 中心点画像を追加 */
        var centerWidget = new ZDC.MapCenter();
        map.addWidget(centerWidget);

        /* 詳細図を追加 */
        detailLayer = new ZDC.Detail(options);
        map.addWidget(detailLayer);

        /* 地図のドラッグを終了したときの動作 */
        ZDC.addListener(map, ZDC.MAP_DRAG_END, getDetailMapInfo);

        /* 詳細図情報取得 */
        getDetailMapInfo();

        scale = new ZDC.ScaleBar();
        map.addWidget(scale);

        controlNormal = new ZDC.Control(
            {
                 pos: {
                     top: 10,
                     left: 10
                 },
                 type: ZDC.CTRL_TYPE_NORMAL,
                 close: true
             }
        );

        /* 通常のコントロールを表示 */
        map.addWidget(controlNormal);

    };

    /********** 階層表示 **********/

    var btnFloorArr = []; // 階層ボタン
    var addedEleArr = []; // 階層ボタン表示tr(表示コントロール用)

    function getDetailMapInfo() {
        /* 中心座標を取得 */
        var currLatlonStr = map.getLatLon();

        /* 詳細図の情報を取得 */
        ZDC.Search.getByZmaps('detail_map_info', {
                latlon: currLatlonStr.lat + ',' + currLatlonStr.lon
            },
            function (status, data) {
                /* 階層ボタンクリア */
                cleanBtnArr(btnFloorArr);

                var items = data.item;
                var floorInfoArr; // フロア情報
                for (var i = 0; i < items.length; i++) {
                    /* フロア情報を取得 */
                    floorInfoArr = items[i]['floorInfo'];
                    floorInfoArr = floorInfoArr.sort(function(a, b){return a.floorLevel - b.floorLevel});

                    /* 階層ボタン追加 */
                    addFloorBtn(floorInfoArr, i);
                }
            }
        );
    }

    function cleanBtnArr(btnArr) {
        for (var i = addedEleArr.length - 1; i >= 0; i--) {
          if(addedEleArr[i].parentNode != null){
                addedEleArr[i].parentNode.removeChild(addedEleArr[i]);
            }
        }
        btnArr.length = 0;
    }

    // ボタン背景色
    var btnBgColors = ['#28b9b1', '#2854b9', '#3428b9', '#6228b9', '#9228b9', '#b928b4'];

    function addFloorBtn(floorInfoArr, I) {
        currLevel = detailLayer.getFloorLevel();
        var table = document.getElementById('menuTbl');

        for (var i = floorInfoArr.length - 1; i >= 0; i--) {
            var btn = document.createElement('BUTTON');
            btn.className = 'menuBtn floorBtn';

            btn.style.backgroundColor = btnBgColors[(I < btnBgColors.length) ? I : btnBgColors.length - 1];

            btnFloorArr.push(btn);
            if (currLevel == floorInfoArr[i].floorLevel) {
                btn.style.color = 'red';
            }
            btn.addEventListener('click',
                function () {
                    currLevel = detailLayer.getFloorLevel();
                    detailLayer.moveToFloor(this.value);
                    resetBtnColor(btnFloorArr);

                    this.style.color = 'red';
                }
            );
            btn.value = floorInfoArr[i].floorLevel;
            var t = document.createTextNode(floorInfoArr[i].floorName);
            var td = document.createElement('TD');
            var tr = document.createElement('TR');
            table.appendChild(tr);
            addedEleArr.push(tr);
            tr.appendChild(td);
            td.appendChild(btn);
            btn.appendChild(t);
        }
    }

    function upToFloor(btn) {
        /* 1階層上の詳細図へ移動 */
        detailLayer.upToFloor();

        /* 表示中の詳細図の階層を取得 */
        var currLevel = detailLayer.getFloorLevel();
        resetBtnColor(btnFloorArr);
        btn.style.color = 'red';
        markFloorByRedColor(btnFloorArr, currLevel);
        document.getElementById('downToFloorBtn').style.color = 'white';
    }

    function downToFloor(btn) {
        /* 1階層下の詳細図へ移動 */
        detailLayer.downToFloor();

        /* 表示中の詳細図の階層を取得 */
        var currLevel = detailLayer.getFloorLevel();
        resetBtnColor(btnFloorArr);
        btn.style.color = 'red';
        markFloorByRedColor(btnFloorArr, currLevel)
        document.getElementById('upToFloorBtn').style.color = 'white';
    }

    function resetBtnColor (btnArr) {
        for (var i = btnArr.length - 1; i >= 0; i--) {
            if (btnArr[i].style.color == 'red') {
                btnArr[i].style.color = 'white';
            }
        }
    }

    function markFloorByRedColor (btnArr, level) {
        for (var i = btnArr.length - 1; i >= 0; i--) {
            if (btnArr[i].value == level) {
                btnArr[i].style.color = 'red';
            }
        }
    }

</script>

<style>
.body {
    top:0px;
    position:absolute;
}
.body.map {
    border:1px solid #777777;
    width:750px;
    height:500px;
    left:20px;
}
.body.menu {
    right:40px; top:20px;
}
.menuBtn {
    background-color: #2980b9;
    border: none;
    color: white;
    padding: 8px;
    width: 48px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.menuBtn.updownBtn {
    background-color: #2980b9;
}
.menuBtn.floorBtn {
    background-color: #16a085;
}
</style>
</head>

<body onload="loadMap();">
    <div id="ZMap" class="body map"></div>
    <div class="body menu">
        <table id="menuTbl">
            <tr>
                <td>
                    <button id="upToFloorBtn" class="menuBtn updownBtn" type="button" onclick="upToFloor(this);">↑</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="downToFloorBtn" class="menuBtn updownBtn" type="button" onclick="downToFloor(this);">↓</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>