次の例では、駅を検索して、選択した駅を出発地点として地図の中心点までのルートを表示します。
１．駅名を入力して、「駅名検索」ボタンを押す
２．リストから駅を選択する
３．地図をドラッグする（中心点が目的地になる）
４．「ルート検索」ボタンを押す
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml: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,shape.js&enc=UTF8" type="text/javascript"></script> <script type="text/javascript"> var map, lat = 35.6778614, lon = 139.7703167, latlon = new ZDC.LatLon(lat, lon); function loadMap() { map = new ZDC.Map( document.getElementById('ZMap'),{ latlon : new ZDC.LatLon(lat, lon), zoom : 9, mapType: ZDC.MAPTYPE_HIGHRES_LV18 }); /* スケールバーを作成 */ scale = new ZDC.ScaleBar(); /* スケールバーを表示 */ map.addWidget(scale); /* 通常のコントロールを表示 */ map.addWidget(new ZDC.Control()); var center = new ZDC.MapCenter(); map.addWidget(center); }; /* 駅検索ボタン */ function searchClick(){ var word = document.getElementById('word').value; if (word == '') { return; } else { execSearch(word); } }; /* 検索成功時の処理 */ function execSearch(word){ ZDC.Search.getByZmaps('station/word', { word : word }, function(status, res) { if (status.code === 200 && res.status.code === '0000') { /* 取得成功 */ initTable(); writeTable(res); } else { /* 取得失敗 */ alert(status.text); } }); }; /* 駅検索結果テーブル作成 */ function initTable() { var element = document.getElementById('search-result'); while (element.firstChild) { element.removeChild(element.firstChild); } }; /* 駅検索結果テーブル作成 */ function writeTable(res) { var item = res.item; var table = document.createElement('table'); table.style.width = '100%'; for (var i=0,l=item.length; i<l; i++) { var tbody = document.createElement('tbody'); var tr = createTr(item[i].poi.text,item[i].poi.point); tbody.appendChild(tr); table.appendChild(tbody); } document.getElementById('search-result').appendChild(table); }; /* 駅検索結果テーブル作成 */ function createTr(text,latlon) { var tr = document.createElement('tr'); /* TD作成 */ var td = document.createElement('td'); var div = document.createElement('div'); div.className = 'eki-list'; div.style.cursor = 'pointer'; var text = document.createTextNode(text); div.appendChild(text); /* 駅名クリック時の処理 */ ZDC.addDomListener(div, 'click', function(){ map.moveLatLon(latlon); /* クリックされた駅の緯度経度を保存 */ select_eki_latlon = latlon; }); td.appendChild(div); tr.appendChild(td); return tr; }; var from, to; var select_eki_latlon = {}, imgdir ='../../image/search/'; var guyde_type = { 'start': { custom: { base: { src: imgdir + 'route_bg.png', imgSize: new ZDC.WH(35, 35), imgTL: new ZDC.TL(0, 0) }, content: { src: imgdir + 'route_cat.png', imgSize: new ZDC.WH(35, 35), imgTL: new ZDC.TL(0, 0) } }, offset: ZDC.Pixel(0, -36) }, 'end': { custom: { base: { src: imgdir + 'route_bg.png', imgSize: new ZDC.WH(35, 35), imgTL: new ZDC.TL(38, 0) }, content: { src: imgdir + 'route_cat.png', imgSize: new ZDC.WH(35, 35), imgTL: new ZDC.TL(35, 0) } }, offset: ZDC.Pixel(0, -36) } }; var line_property = { '通常通路': {strokeColor: '#3000ff', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '横断歩道': {strokeColor: '#008E00', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '横断通路': {strokeColor: '#007777', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '歩道橋': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '踏切内通路': {strokeColor: '#008800', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '連絡通路': {strokeColor: '#000088', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '建物内通路': {strokeColor: '#550000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '敷地内通路': {strokeColor: '#005500', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '乗換リンク': {strokeColor: '#000055', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '道路外': {strokeColor: '#110000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '引き込みリンク':{strokeColor: '#FF0000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '通路外':{strokeColor: '#00FF00', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'} }; var mode; /* ルート検索ボタン */ function routeClick() { from = select_eki_latlon; to = map.getLatLon(); /* 歩行者ルート検索を実行 */ ZDC.Search.getByZmaps('route/walk', { from: from.lat + ',' + from.lon, to: to.lat + ',' + to.lon }, function(status, res) { if (status.code === 200 && res.status.code === '0000') { /* 取得成功 */ removeAllWidget(); writeRoute(status, res); } else { /* 取得失敗 */ alert(status.text); } }); }; var pl = []; var mk = []; /* ルートを描画します */ function writeRoute(status, res) { /* スタートとゴールのアイコンを地図に重畳します */ setStartEndWidget(); var link = res.route.link; /* 現在描画しているロードタイプを保存する */ var now_road_type; for (var i=0, j=link.length; i<j; i++) { if (i == 0) { now_road_type = link[i].type; var opt = line_property[link[i].type]; } else { if (now_road_type != link[i].type) { var opt = line_property[link[i].type]; } } var latlons = []; var latlon = link[i].line.latlon; for (var k=0, l=latlon.length-1; k<l; k+=2) { latlons.push(new ZDC.LatLon(latlon[k],latlon[k+1])); } pl[i] = new ZDC.Polyline(latlons, opt); map.addWidget(pl[i]); if (link[i].type != '通常通路') { var guide = link[i].type; var marker = new ZDC.Marker(new ZDC.LatLon(latlon[0], latlon[1])); map.addWidget(marker); /* マーカがクリックされた時のイベントを追加します */ ZDC.bind(marker, ZDC.MARKER_CLICK,{link:link[i]}, markerClick); mk.push(marker); } } }; var start, end; /* スタートとゴールのアイコンを地図に重畳します */ function setStartEndWidget() { start = new ZDC.Marker(from, guyde_type["start"]); end = new ZDC.Marker(to, guyde_type["end"]); /* * スタートとゴールのウィジットが他のマーカの * 下にならないようにz-indexを設定します */ start.setZindex(110); end.setZindex(110); map.addWidget(start); map.addWidget(end); }; var msg_info; /* マーカクリックイベント */ function markerClick() { var html = '<div style = "width:200px; height:50px;">'; html += '<table border="1" style="width:180px;">'; html += '<tr><td width="35%" style="font-size:10pt;">通路種別</td><td style="font-size:10pt;">' + this.link.structureType + '</td></tr>'; html += '<tr><td style="font-size:10pt;">構造種別</td><td style="font-size:10pt;">'+ this.link.type +'</td></tr></tbody></table></div>'; if (typeof msg_info != 'undefined') { map.removeWidget(msg_info); } msg_info = new ZDC.MsgInfo( new ZDC.LatLon(this.link.line.latlon[0], this.link.line.latlon[1]), {html: html, offset: ZDC.Pixel(0, -18)} ); map.addWidget(msg_info); msg_info.open(); }; function removeAllWidget(){ for (var i=0,l=pl.length; i<l; i++) { pl[i].removeAllPoints(); pl[i].redraw(); } pl = []; for (i = 0,l = mk.length; i < l; i++) { map.removeWidget(mk[i]); } mk = []; for (var i=0,l=pl.length; i<l; i++) { } if (typeof msg_info != 'undefined') { map.removeWidget(msg_info); } if (typeof start != 'undefined') { map.removeWidget(start); } if (typeof end != 'undefined') { map.removeWidget(end); } }; </script> <style> div.eki-list:hover{ background-color: #C8FFFF; } </style> </head> <body onload="loadMap();"> <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div> <div id="search-area" style="width:750px; height:200px; top:510px; left:20px; position:absolute;"> <input type="text" id="word" value="東京"> <input type="button" id="search-btn" value='駅検索' onclick='searchClick();'> <input type="button" id="route-btn" value='ルート検索' onclick='routeClick();'> <div id="search-result" style="overflow: scroll; height: 150px"> </div> </div> </body> </html>