次の例では、ボタンを押した際に印刷に適した地図に変更します。
印刷に適した地図に変更するには、ZDC.MapクラスのsetPrintModeOn()を利用します。
setPrintModeOn()を実行せずに印刷すると、正常に表示されない可能性があります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,shape.js,control.js,submap.js,search.js&enc=SJIS" type="text/javascript"></script> <script type="text/javascript"> var map, mrk1, mrk2, msginfo, 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: 9, mapType: ZDC.MAPTYPE_HIGHRES_LV18 } ); /* 中心点画像を追加 */ map.addWidget(new ZDC.MapCenter()); /* スケールバーを追加 */ map.addWidget(new ZDC.ScaleBar()); /* コントロールを表示 */ map.addWidget(new ZDC.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バーガー１号店</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, {size: ZDC.WH(150, 150)})); ZDC.Search.getByZmaps('route3/drive', { searchType: 0, 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 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 = []; var latlons = link[i].line.latlon; for (var k=0, l=latlons.length-1; k<l; k+=2) { pllatlons.push(new ZDC.LatLon(latlons[k],latlons[k+1])); } 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:750px; height:500px; 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> <html> <head> <meta charset="UTF-8"> <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,shape.js,control.js,submap.js,search.js&enc=SJIS" type="text/javascript"></script> <script type="text/javascript"> var map, mrk1, mrk2, msginfo, 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 = Number(parm[0]); lon = Number(parm[1]); zoom = Number(parm[2]); from = new ZDC.LatLon(Number(parm[3]), Number(parm[4])); to = new ZDC.LatLon(Number(parm[5]), Number(parm[6])); labelhtml = decodeURI(parm[7]); } map = new ZDC.Map( document.getElementById('ZMap'), { latlon: new ZDC.LatLon(lat, lon), zoom: zoom, mapType: ZDC.MAPTYPE_HIGHRES_LV18 } ); /* 中心点画像を表示 */ map.addWidget(new ZDC.MapCenter()); /* スケールバーを表示 */ map.addWidget(new ZDC.ScaleBar()); /* コントロールを表示 */ map.addWidget(new ZDC.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.getByZmaps('route3/drive', { searchType: 0, 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 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 = []; var latlons = link[i].line.latlon; for (var k=0, l=latlons.length-1; k<l; k+=2) { pllatlons.push(new ZDC.LatLon(latlons[k],latlons[k+1])); } 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>