次の例では、ボタンを押した際に自動車ルート探索の結果を線とマーカを使って地図に表示します。
マーカをクリックした際に、通過する交差点の情報を記載した吹き出しを表示します。
自動車のルートを探索するには、ZDC.SearchのgetRouteByDrive()を利用します。
ルートを地図内に表示するには、ZDC.MapクラスのgetAdjustZoom()メソッドを利用します。
<!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,shape.js&enc=EUC&force=1" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map, from, to, msg_info, lat = 35.6778614, lon = 139.7703167, imgdir ='../../image/search/'; var guide_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(-5, -30) }, '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(-5, -30) } }; 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(lat, lon); map = new ZDC.Map(document.getElementById('ZMap'),{ latlon: ll, zoom: 5 }); msg_info = new ZDC.MsgInfo(ll, {offset: ZDC.Pixel(0, -18)}); map.addWidget(msg_info); }; function exec(){ /* スタート地点の緯度経度 */ from = new ZDC.LatLon(35.6806275, 139.8015336); /* ゴール地点の緯度経度 */ to = new ZDC.LatLon(35.6659792, 139.74036); /* 自動車ルート探索を実行 */ ZDC.Search.getRouteByDrive({ from: from, to: to },function(status, res) { if (status.code == '000') { /* 取得成功 */ writeRoute(res); } else { /* 取得失敗 */ alert(status.text); } }); }; function writeRoute(res) { /* スタートとゴールのアイコンを地図に重畳します */ var start = new ZDC.Marker(from,guide_type['start']); var end = new ZDC.Marker(to,guide_type['end']); /* スタートとゴールのウィジットが他のマーカの 下にならないようにz-indexを設定します */ start.setZindex(110); end.setZindex(110); map.addWidget(start); map.addWidget(end); var link = res.route.link; var latlons = []; for (var i=0, j=link.length; i<j; i++) { var opt = line_property[link[i].roadType]; var pllatlons =[]; for (var k=0, l=link[i].line.length; k<l; k++) { pllatlons.push(link[i].line[k]); latlons[i] = link[i].line[0]; if(i == j-1 && k == 1) { latlons[i+1] = link[i].line[1]; } } var pl = new ZDC.Polyline(pllatlons, opt); map.addWidget(pl); if (link[i].guidance != null) { var guide = link[i].guidance.guideType; /* 交差点 || 方面及び方向 || ETC */ var url = link[i].guidance.crossImageUri || link[i].guidance.signboardImageUri || link[i].guidance.etcImageUri; if (url) { var mk = new ZDC.Marker(link[i].line[0]); 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 url = this.link.guidance.crossImageUri || this.link.guidance.signboardImageUri || this.link.guidance.etcImageUri; var road_name = this.link.guidance.roadName || 'なし'; var cross_name = this.link.guidance.crossName || 'なし'; var html = '<div style = "width:200px; height:150px; overflow-y:scroll;">'; html += '<img src=' + url + '></src>'; html += '<table border="1" style="width:180px;">'; html += '<tr>'; html += '<td width="35%" style="font-size:10pt;">道路名</td>'; html += '<td style="font-size:10pt;">'+ road_name +'</td>'; html += '</tr>'; html += '<tr>'; html += '<td style="font-size:10pt;">交差点名</td>'; html += '<td style="font-size:10pt;">'+ cross_name +'</td>'; html += '</tr></table></div>'; msg_info.setHtml(html); msg_info.moveLatLon(new ZDC.LatLon(this.link.line[0].lat, this.link.line[0].lon)); msg_info.open(); }; //]]> </script> </head> <body onload="loadMap();"> <div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:0px; left:20px; position:absolute;"></div> <div id="IBox" style="top:0px; left:540px; position:absolute;"> <input type="button" value="自動車ルート検索" onclick="exec();"> </div> </body> </html>