Question

我有一个我不明白的问题。我每个都有两个容器包含地图。我的目标是能够打印它们，这样做我用过 window.print（）但是当我移动到打印时，瓷砖没有被加载布局。如果您对发生的事情有任何疑问，请告诉我。

var map1;
  var map2;
  $(document).ready(function(){
      map1 = L.map( 'map1', {
      center: [33.960057, -6.916462],
      minZoom: 2,
      zoom: 14,
      zoomControl: true
      });
      L.tileLayer("https://stamen-tiles-c.a.ssl.fastly.net/terrain-labels/{z}/{x}/{y}.png",{opacity:0.7}).addTo( map1 );
      L.tileLayer("http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",{opacity:0.7}).addTo( map1 );

      map2 = L.map( 'map2', {
      center: [33.960057, -6.916462],
      minZoom: 2,
      zoom: 14,
      zoomControl: true
      });
      L.tileLayer("https://stamen-tiles-c.a.ssl.fastly.net/terrain-labels/{z}/{x}/{y}.png",{opacity:0.7}).addTo( map2 );
      L.tileLayer("http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",{opacity:0.7}).addTo( map2 );

      map1.on("click",function (e) {
        var center = map1.getCenter();
        map2.flyTo(center);
      });
      window.print();


    });

  html, body{
  width: 100% !important;
  height: 100% !important;
  padding:0;
  position: relative;
  margin: 0px;
  overflow: hidden;
  }
  #map1, #map2{
    height : 100%;
    position: relative;
    z-index: 500;
    border-radius: 10px;
  }
  @media print {
  @page {
   size: landscape;
  }

  body *{
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    /*color:unset !important;
    color: transparent !important;*/
  }

}

  <body>
    <div class="container" style="height:100%;">
      <div class="row" style="height:100%;">
        <div id="map1"class="col-xs-6">

        </div>
        <div id="map2"class="col-xs-6">

        </div>
      </div>
    </div>
  </body>

var map1;
  var map2;
  $(document).ready(function(){
      map1 = L.map( 'map1', {
      center: [33.960057, -6.916462],
      minZoom: 2,
      zoom: 14,
      zoomControl: true
      });
      L.tileLayer("https://stamen-tiles-c.a.ssl.fastly.net/terrain-labels/{z}/{x}/{y}.png",{opacity:0.7}).addTo( map1 );
      L.tileLayer("http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",{opacity:0.7}).addTo( map1 );

      map2 = L.map( 'map2', {
      center: [33.960057, -6.916462],
      minZoom: 2,
      zoom: 14,
      zoomControl: true
      });
      L.tileLayer("https://stamen-tiles-c.a.ssl.fastly.net/terrain-labels/{z}/{x}/{y}.png",{opacity:0.7}).addTo( map2 );
      L.tileLayer("http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",{opacity:0.7}).addTo( map2 );

      map1.on("click",function (e) {
        var center = map1.getCenter();
        map2.flyTo(center);
      });
      window.print();


    });

html, body{
  width: 100% !important;
  height: 100% !important;
  padding:0;
  position: relative;
  margin: 0px;
  overflow: hidden;
  }
  #map1, #map2{
    height : 100%;
    position: relative;
    z-index: 500;
    border-radius: 10px;
  }

  @media print {
  @page {
   size: landscape;
  }

  body *{
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    /*color:unset !important;
    color: transparent !important;*/
  }

}

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Hind+Siliguri" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="print.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
    integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
    integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
    crossorigin=""></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>

 <body>
    <div class="container" style="height:100%;">
      <div class="row" style="height:100%;">
        <div id="map1"class="col-xs-6">

        </div>
        <div id="map2"class="col-xs-6">

        </div>
      </div>
    </div>
  </body>

Answer 1

在另一个post中看到这个 - 是否有任何帮助？ “使用Chrome和Safari，您可以将CSS样式// run cron jobs only for first instance if(process.env.NODE_APP_INSTANCE === '0'){ // cron jobs }添加到元素中以强制打印背景颜色和/或图像”

打印时加载瓷砖的问题

1 个答案: