次の例では、ボタンを押した際に、品川駅周辺を検索します。
乗換案内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>