ホ−ム » 基本サンプル » 印刷に適した地図に変更する

印刷に適した地図に変更する

実行結果

次の例では、ボタンを押した際に印刷に適した地図に変更します。

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/utility/utility_002.html

ソースコードと解説

印刷に適した地図に変更するには、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>