ZDC.Search.getByJorudanを使う

実行結果

次の例では、ボタンを押した際に、品川駅周辺を検索します。

ソースコードと解説

乗換案内Bizの各種検索を利用するには、ZDC.Search.getByJorudan()を利用します。
乗換案内Bizの検索名であるsen.cgiを指定して検索します。

<!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,control.js,search.js&enc=UTF8" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
    var map, msg,
        lat = 35.621243, lon = 139.750374;

    function loadMap(){
        var latlon  = new ZDC.LatLon(lat, lon);
        map = new ZDC.Map(document.getElementById('ZMap'),{
            latlon: latlon,
            zoom: 9,
            mapType: ZDC.MAPTYPE_HIGHRES_LV18 
        });

        msg = new ZDC.MsgInfo(latlon, {offset: ZDC.Pixel(0, -18)});
        map.addWidget(msg);

        var scale = new ZDC.ScaleBar();
        map.addWidget(scale);
        map.addWidget(new ZDC.Control());
    }

    function exec(){
        ZDC.Search.getByJorudan('sen.cgi', {
            eki1: '品川駅'
        },function(status, res) {
            if (status.code === 200) {
                /* 取得成功 */
                document.getElementById('ResultArea').innerText = JSON.stringify(res);
            } else {
                /* 取得失敗 */
                alert(status.text);
            }
        });
    }

    function clearResult() {
      document.getElementById('ResultArea').innerText = '';
    }

</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:750px; height:300px; top:0px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:40px; right:40px; position:absolute;">
        <input type="button" value="検索実行" onclick="exec();"><br>
        <input type="button" value="結果削除" onclick="clearResult();">
    </div>
    <div id="ResultArea" style="border:1px solid #777777; width:750px; height:200px; top: 300px; left:20px; position:absolute; overflow: scroll"></div>
</body>
</html>