次の例では、ボタンを押した際に歩行者ルート検索の結果を線とマーカを使って地図に表示します。
マーカをクリックした際に、通過する道路種別の情報を記載した吹き出しを表示します。
歩行者のルート検索をするには、ZDC.Search.getByZmaps()のroute/walkを利用します。
ルートを地図内に表示するには、ZDC.MapクラスのgetAdjustZoom()メソッドを利用します。
<!DOCTYPE html> <html> <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> <style type="text/css"> <!-- .personalboxtt{ font-size: 12px; font-family: "MS Pゴシック", Verdana, Helvetica; text-align: left; width:700px; height:20px; } .personalboxt { font-size: 12px; font-family: "MS Pゴシック", Verdana, Helvetica; text-align: right; width:120px; height:20px; } .dev{} .dev .personalboxtt { color: #000000; background-color: #80CC00; } .dev .personalboxt { color: #003399; background-color: #B3D973; } .personalboxf{ font-size: 12px; font-family: "MS Pゴシック", Verdana, Helvetica; text-align: left; width:580px; height:20px; color: #003399; background-color: #F8F8F8; } .header2 {position: relative; } --> </style> <script type="text/javascript"> var map, msg_info, imgdir ='../../image/search/', from = new ZDC.LatLon(35.685754722, 139.785605556), to = new ZDC.LatLon(35.669612, 139.75245); 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: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '敷地内通路': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '乗換リンク': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}, '通路外': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'} }; function loadMap(){ var ll = new ZDC.LatLon(35.6778614, 139.7703167); map = new ZDC.Map(document.getElementById('ZMap'),{ latlon: ll, zoom: 10, mapType: ZDC.MAPTYPE_HIGHRES_LV18 }); /* スケールバーを作成 */ map.addWidget(new ZDC.ScaleBar()); /* 通常のコントロールを表示 */ map.addWidget(new ZDC.Control()); msg_info = new ZDC.MsgInfo(ll, {offset: ZDC.Pixel(0, -18)}); map.addWidget(msg_info); }; function exec(){ 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') { /* 取得成功 */ writeRoute(status, res); } else { /* 取得失敗 */ alert(status.text); } }); }; function writeRoute(status, res) { /* スタートとゴールのアイコンを地図に重畳します */ var start = new ZDC.Marker(from, guyde_type['start']); var end = new ZDC.Marker(to, guyde_type['end']); /* スタートとゴールのウィジットが他のマーカの 下にならないようにz-indexを設定します */ start.setZindex(110); end.setZindex(110); map.addWidget(start); map.addWidget(end); var link = res.route.link; var pl, latlons = []; for (var i=0, j=link.length; i<j; i++) { var opt = line_property[link[i].type]; var pllatlons = []; var latlon = link[i].line.latlon; for (var k=0, l=latlon.length-1; k<l; k+=2) { pllatlons.push(new ZDC.LatLon(latlon[k],latlon[k+1])); latlons.push(new ZDC.LatLon(latlon[k],latlon[k+1])); } var pl = new ZDC.Polyline(pllatlons, opt); map.addWidget(pl); if (link[i].type != '通常通路') { var guide = link[i].type; var mk = new ZDC.Marker(new ZDC.LatLon(latlon[0], latlon[1])); map.addWidget(mk); /* マーカをクリックしたときの動作 */ ZDC.bind(mk, ZDC.MARKER_CLICK, {link: link[i]}, markerClick); } } /* 地点が全て表示できる縮尺レベルを取得 */ var adjust = map.getAdjustZoom(latlons); map.moveLatLon(adjust.latlon); map.setZoom(adjust.zoom); }; function markerClick() { var html = '<div style = "width:200px; height:50px;">'; html += '<table border="1" style="width:180px;">'; html += '<tr>'; html += '<td width="35%" style="font-size:10pt;">通路種別</td>'; html += '<td style="font-size:10pt;">' + this.link.structureType + '</td>'; html += '</tr>'; html += '<tr>'; html += '<td style="font-size:10pt;">構造種別</td>'; html += '<td style="font-size:10pt;">'+ this.link.type +'</td>'; html += '</tr></table></div>'; msg_info.setHtml(html); msg_info.moveLatLon(new ZDC.LatLon(this.link.line.latlon[0], this.link.line.latlon[1])); msg_info.open(); }; </script> </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="IBox" style="top:20px; left:630px; position:absolute;"> <input type="button" value="歩行者ルート検索" onclick="exec();"> </div> </body> </html>