次の例では、ボタンを押した際に印刷に適した地図に変更します。
印刷に適した地図に変更するには、ZDC.MapクラスのsetPrintModeOn()を利用します。
setPrintModeOn()を実行せずに印刷すると、正常に表示されない可能性があります。
<!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,shape.js,control.js,submap.js,search.js&enc=SJIS&force=1" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map, mrk1, mrk2, msginfo, control, from, to, labelhtml, lat = 35.6778614, lon = 139.7703167, zoom = 7; function loadMap() { map = new ZDC.Map( document.getElementById('ZMap'), { latlon: new ZDC.LatLon(lat, lon), zoom: zoom } ); /* 中心点画像を追加 */ map.addWidget(new ZDC.MapCenter()); /* スケールバーを追加 */ map.addWidget(new ZDC.ScaleBar()); /* コントロール(標準)を作成 */ control = new ZDC.Control({ tlbr: { top: 10, left: 10 }, type: ZDC.CTRL_TYPE_NORMAL } ); /* コントロールを表示 */ map.addWidget(control); /* スタート地点の緯度経度 */ from = new ZDC.LatLon(35.685754722, 139.785605556); /* ゴール地点の緯度経度 */ to = new ZDC.LatLon(35.669612, 139.75245); /* マーカを作成 */ mrk1 = new ZDC.Marker(to, { color: ZDC.MARKER_COLOR_ID_BLUE_S, number: ZDC.MARKER_NUMBER_ID_2_S }); map.addWidget(mrk1); /* マーカを作成 */ mrk2 = new ZDC.Marker(from, { color: ZDC.MARKER_COLOR_ID_BLUE_S, number: ZDC.MARKER_NUMBER_ID_1_S }); map.addWidget(mrk2); labelhtml = '<div><div><b>Zetバーガー1号店</b></div>'; labelhtml += '<table cellspacing="0">'; labelhtml += '<tr><td><u>電話番号:03-xxxx-xxxx</u></td></tr>'; labelhtml += '<tr><td><u>email:xxx@xxx.xxx</u></td></tr></table></div>'; /* 吹き出しを作成 */ msginfo = new ZDC.MsgInfo(to, {html: labelhtml, offset: ZDC.Pixel(0, -18)}); /* 吹き出しを地図に追加 */ map.addWidget(msginfo); /* 吹き出しを表示 */ msginfo.open(); /* サブマップを追加 */ map.addWidget(new ZDC.Submap(map)); ZDC.Search.getRouteByWalk({ from: from, to: to },function(status, res) { if (status.code == '000') { /* 取得成功 */ writeRoute(status, res); } else { /* 取得失敗 */ alert(status.text); } }); }; function writeRoute(status, res) { var pl, link = res.route.link; for (var i=0, j=link.length; i<j; i++) { var opt = {strokeColor: '#a600e3', strokeWeight: 5, lineOpacity: 0.8, lineStyle: 'solid'}; var pllatlons = []; for (var k=0, l=link[i].line.length; k<l; k++) { pllatlons.push(link[i].line[k]); } var pl = new ZDC.Polyline(pllatlons, opt); map.addWidget(pl); } }; function showPrintPage(){ var parm = lat + '&'+ lon + '&' + map.getZoom(); parm += '&' + from.lat + '&' + from.lon + '&'+ to.lat; parm += '&' + to.lon + '&' + encodeURI(labelhtml); window.open('./printPage.html?' + parm, '_blank', 'toolbar=0, location=0, status=0, menubar=yes, scrollbars=0, resizable=0, width=660, height=870'); }; //]]> </script> </head> <body onload="loadMap();"> <div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:0px; left:20px; position:absolute;"> <div style="top:10px; right:10px; position:absolute;z-index:100;"> <input type="button" value="印刷用にする" onclick="showPrintPage();"> </div> </div> </body> </html>
印刷ページ表示用のソースコードです。
<!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,shape.js,control.js,submap.js,search.js&enc=SJIS&force=1" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map, mrk1, mrk2, msginfo, control, from, to, lat, lon , zoom, labelhtml; function loadMap() { if(window.location.search){ /* URLのパラメータを取得する */ var n = window.location.search.substring(1, window.location.search.length); var parm = n.split('&'); lat = parm[0]; lon = parm[1]; zoom = parm[2]; from = new ZDC.LatLon(parm[3], parm[4]); to = new ZDC.LatLon(parm[5], parm[6]); labelhtml = decodeURI(parm[7]); } map = new ZDC.Map( document.getElementById('ZMap'), { latlon: new ZDC.LatLon(lat, lon), zoom: Number(zoom) } ); /* 中心点画像を追加 */ map.addWidget(new ZDC.MapCenter()); /* スケールバーを追加 */ map.addWidget(new ZDC.ScaleBar()); /* コントロール(標準)を作成 */ control = new ZDC.Control({ tlbr: { top: 10, left: 10 }, type: ZDC.CTRL_TYPE_NORMAL } ); /* コントロールを表示 */ map.addWidget(control); /* マーカを作成 */ mrk1 = new ZDC.Marker(to, { color: ZDC.MARKER_COLOR_ID_BLUE_S, number: ZDC.MARKER_NUMBER_ID_2_S }); map.addWidget(mrk1); /* マーカを作成 */ mrk2 = new ZDC.Marker(from, { color: ZDC.MARKER_COLOR_ID_BLUE_S, number: ZDC.MARKER_NUMBER_ID_1_S }); map.addWidget(mrk2); /* 吹き出しを作成 */ msginfo = new ZDC.MsgInfo(to, {html: labelhtml, offset: ZDC.Pixel(0, -18)}); /* 吹き出しを地図に追加 */ map.addWidget(msginfo); /* 吹き出しを表示 */ msginfo.open(); /* サブマップを追加 */ map.addWidget(new ZDC.Submap(map)); /* 吹き出しの内容をメモ欄に表示 */ labelhtml = labelhtml.replace(/<td>/g, '\r\n'); while(labelhtml.indexOf('<') != -1){ var sindx = labelhtml.indexOf('<'), eindx = (labelhtml.indexOf('>')) +1, str = labelhtml.substring(sindx, eindx); labelhtml = labelhtml.replace(str, ''); } document.getElementById('id_txt1').value = labelhtml; ZDC.Search.getRouteByWalk({ from: from, to: to },function(status, res) { if (status.code == '000') { /* 取得成功 */ writeRoute(status, res); } else { /* 取得失敗 */ alert(status.text); } }); }; function writeRoute(status, res) { var pl, link = res.route.link; for (var i=0, j=link.length; i<j; i++) { var opt = {strokeColor: '#a600e3', strokeWeight: 5, lineOpacity: 0.8, lineStyle: 'solid'}; var pllatlons = []; for (var k=0, l=link[i].line.length; k<l; k++) { pllatlons.push(link[i].line[k]); } var pl = new ZDC.Polyline(pllatlons, opt); map.addWidget(pl); } /* ウィジットを印刷用の仕様に変更する */ map.setPrintModeOn(); }; //]]> </script> </head> <body onload="loadMap();"> <div> <form> <textarea id="id_txt1" style="width:600px;height:60px;"></textarea> </form> </div> <div id="ZMap" style="display: block; width: 640px; height: 780px; top:10px; position: relative; overflow-x: hidden; overflow-y: hidden;align:center;"></div> </body> </html>