いつもNAVI API マニュアル

実行結果

次の例では、選択した住所リストの場所へ移動します。選択後は住所リストの下の階層の住所を選択することができ、その場所へ移動できます。
サンプルでは住所リスト取得件数の上限をデフォルトの100件としています。全ての住所が表示されない場合があります。

ソースコードと解説

住所コードで住所リスト検索するには、ZDC.Search.getAddrListByAddrCode()を利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,search.js&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[
    var map, mrk;

    function loadMap() {
        map = new ZDC.Map(
            document.getElementById("ZMap"),
            {
                zoom: 6
            }
        );

        /* マーカを作成 */
        mrk = new ZDC.Marker(new ZDC.LatLon(35.6778614, 139.7703167));

        /* 位置取得 */
        setAddr("", "");

        /* マーカを追加 */
        mrk.hidden();       //初期表示しない
        map.addWidget(mrk);

    };

    /* セレクトボックスに選択した場所の住所リストを格納 */
    function setAddr(addrCode, addrText) {
        ZDC.Search.getAddrListByAddrCode({
            addrcode: addrCode,
            limit: '0,100'
        }, function(status, res) {
            if (status.code == "000") {
                /* 取得成功 */
                getAddr(status, res, addrCode, addrText);
            } else {
                /* 取得失敗 */
                alert(status.text);
            }
        });
    };

    /* 選択した場所の下位の住所リストを取得 */
    function getAddr(status, res, addrCode, addrText) {
        var item = res.item;
        var obj = document.getElementById("area");
        obj.length = 1;

        if (addrText == "") {
            /* 初期表示 */
            obj.options[0].text = "--";
        } else {
            obj.options[0].text = addrText;

            showLatlon(addrCode);
        }

        /* 選択されている場所の配下のエリアをセレクトボックスに表示 */
        for (var i = 0, j = item.length; i<j; i++) {
            obj.length++;
            obj.options[(i+1)].value = item[i].code;
            obj.options[(i+1)].text = item[i].text;
        }
    };

    function addrSelect() {
        var options = document.getElementById("area").options;
        mrk.visible();

        /* セレクトボックスへ値格納 */
        setAddr(options.item(area.selectedIndex).value, 
            options.item(area.selectedIndex).text);
    };

   /* 選択した場所を表示 */
    function showLatlon(addrCode) {
        var code, item, addrLatLon;

        /* 住所コードが「地番」の場合、「街区」の緯度経度を取得する */
        if (addrCode.length > 20) {
            code = addrCode.substr(0, 16);
        } else {
            code = addrCode;
        }

        ZDC.Search.getAddrListByAddrCode ({
            addrcode: code
        }, function(status, res) {
            if (status.code == "000") {
                /* 取得成功 */
                item = res.item;

                /* 住所コードの分類が「地番」以外の場合はデータの先頭の場所を表示する */
                addrLatLon = item[0].latlon;

                for (var i = 0, k = item.length; i < k; i++){
                    /* 住所コードの分類が「地番」の場合 */
                    if (item[i].code == addrCode) {
                        addrLatLon = item[i].latlon;
                    }
                }
                map.moveLatLon(addrLatLon);

                /* マーカを表示 */
                mrk.moveLatLon(addrLatLon);
                map.addWidget(mrk);

            } else {
                /* 取得失敗 */
                alert(status.text);
            }
        });
    };

//]]>
</script>
</head>
<body onload="loadMap();">
    <div id="SArea" style="top:0px; left:20px; position:absolute;">場所：<select id="area" name="area" onChange="addrSelect();"></select></div></br>
    <div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:40px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:0px; left:540px; position:absolute;">
    </div>
</body>
</html>