Question

我正在尝试打印包含谷歌地图的div，其中包含路线和一些标记以及包含一些信息的表格。当我打印该地图时，除路线和标记外，一切正常。他们只是不打印地图。我读到的内容是因为路径和标记位于画布中，但我无法使其工作。有人可以帮助我如何改变我正在使用的逻辑吗？以下是代码：

HTML：

<div id="divMapas" class="col-md-9 affix-container">
        <div id="map-container" class="map-container">
            <h3 class="text-left">
                <button class="pull-left btn" ng-click="mostrarOcultarBarra()">{{labelBotonMostrar}}</button>                
                <div class="dropdown pull-left" ng-show="tituloMapa" style="padding-left: 2px;">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Acciones
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><button class="btn-link" ng-click="CrearKML()">Exportar a KML</button></li>
                        <li><button class="btn-link" ng-click="CrearGPX()">Exportar a GPX</button></li>
                        <li><button class="btn-link" ng-click="print()">Imprimir</button></li>
                        <li><button class="btn-link" ng-click="printNuevo('#divMapas')">Imprimir Nuevo</button></li>
                    </ul>
                </div>
                <div class="divider" />
                {{tituloMapa || '&nbsp;'}}
            </h3>
            <map id="mapaPrincipal" zoom="11" center="{{posicionInicialMapa}}" style="height: 30em;"></map>

            <div class="tabla-paradas">
                <table class="table table-striped text-center">
                    <tr>
                        <th class="text-center">#</th>
                        <th class="text-center">Nombre</th>
                        <th class="text-center">1<sup>er</sup> Horario</th>
                        <th class="text-center">2<sup>do</sup> Horario</th>
                        <th class="text-center">3<sup>er</sup> Horario</th>
                    </tr>
                    <tr class="cursor-pointer" ng-repeat="Parada in recorridoSeleccionado.Paradas" ng-click="centrarParadaEnMapa(Parada)">
                        <td>{{$index + 1}}</td>
                        <td>{{Parada.Nombre}}</td>
                        <td>{{Parada.Horario1 | formatTime}}</td>
                        <td>{{Parada.Horario2 | formatTime}}</td>
                        <td>{{Parada.Horario3 | formatTime}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

使用Javascript：

scope.printNuevo = function (elem) {
                Popup($(elem).html());
            }

            function Popup(data) {
                var mywindow = window.open('', 'my div', 'height=400,width=600');
                mywindow.document.write('<html><head><title>my div</title>');
                /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
                mywindow.document.write('</head><body >');
                mywindow.document.write(data);
                mywindow.document.write('</body></html>');

                mywindow.print();
                mywindow.close();

                return true;
            }

用里面的画布打印谷歌地图

0 个答案: