Question

我试图追踪一个奇怪的错误，其中嵌入式Google地图在页面的HTML版本中看起来很好，但是当我们使用wkhtmltopdf PDF格式化地图时，地图仍在其框内，也继续进入相邻的页面。换句话说，如果地图位于页面底部，则下一页面会有更多地图（地图的下一部分中的地图会更大），重叠顶部的内容。如果地图位于页面顶部，则前一页面会获得额外的地图内容。 The same page in three formats. Please forgive the rough MS Paint anonymization.

我尝试了很多东西，包括：

在所有地方（之前，之后，立即添加额外的div）之前，之后，等等。）
为地图中的div和其包含的divs尝试不同的溢出值
在地图上评论叠加层
尝试并未能使用我的Google-fu寻找解决方案
可能还有其他一些我现在无法记住的事情。

有没有人见过这样的东西？关于可能导致什么的想法，或者我应该探索的方向建议？

仅仅是https://jsfiddle.net/cosmos42/wj81zc13/1/的相关部分的小提琴 - 希望它具有所有必要的信息。我把我们的网址和其他识别信息从小提琴中取出来，因此Google地图实际上无法正常工作......

提前感谢您的帮助。

＆＃13;

var myCenter = new google.maps.LatLng(38.8977, -77.0366);

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(38.8977, -77.0366),
    zoom: 19,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    panControl: false,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    rotateControl: false
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var marker = new google.maps.Marker({
    position: myCenter,
  });

  marker.setMap(map);


  var ParcelLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var proj = map.getProjection();
      var zfactor = Math.pow(2, zoom);
      // get Long Lat coordinates
      var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor));
      var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor));

      //corrections for the slight shift of the SLP (mapserver)
      var deltaX = 0.00;
      var deltaY = 0.00;

      //create the Bounding box string
      var bbox = (top.lng() + deltaX) + "," +
        (bot.lat() + deltaY) + "," +
        (bot.lng() + deltaX) + "," +
        (top.lat() + deltaY);

      //base WMS URL
      var url = "http://gis.someotherwebsitethatisntours.net:9080/geoserver/ttb/wms?";
      url += "&REQUEST=GetMap"; //WMS operation
      url += "&SERVICE=WMS"; //WMS service
      url += "&VERSION=1.1.0"; //WMS version  
      //url += "&LAYERS=" + "fm:parcel_socal"; //WMS layers
      url += "&LAYERS=" + "ttb:parcels_ca"; //WMS layers
      url += "&FORMAT=image/png"; //WMS format
      url += "&BGCOLOR=0xFFFFFF";
      url += "&TRANSPARENT=TRUE";
      url += "&SRS=EPSG:4326"; //set WGS84 
      url += "&BBOX=" + bbox; // set bounding box
      url += "&WIDTH=256"; //tile size in google
      url += "&HEIGHT=256";
      return url; // return URL for the tile

    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
  });

  var FloodLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var proj = map.getProjection();
      var zfactor = Math.pow(2, zoom);
      // get Long Lat coordinates
      var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor));
      var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor));

      //corrections for the slight shift of the SLP (mapserver)
      var deltaX = 0.00;
      var deltaY = 0.00;

      //create the Bounding box string
      var bbox = (top.lng() + deltaX) + "," +
        (bot.lat() + deltaY) + "," +
        (bot.lng() + deltaX) + "," +
        (top.lat() + deltaY);

      //base WMS URL
      var url = "http://gis.someotherwebsitethatisntours.net:9080/geoserver/ttb/wms?";
      url += "&REQUEST=GetMap"; //WMS operation
      url += "&SERVICE=WMS"; //WMS service
      url += "&VERSION=1.1.0"; //WMS version  
      //url += "&LAYERS=" + "fm:parcel_socal"; //WMS layers
      url += "&LAYERS=" + "ttb:flood_poly"; //WMS layers
      url += "&FORMAT=image/png"; //WMS format
      url += "&BGCOLOR=0x99FF00";
      url += "&TRANSPARENT=TRUE";
      url += "&SRS=EPSG:4326"; //set WGS84 
      url += "&BBOX=" + bbox; // set bounding box
      url += "&WIDTH=256"; //tile size in google
      url += "&HEIGHT=256";
      return url; // return URL for the tile

    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
  });

  map.overlayMapTypes.push(ParcelLayer);


}
google.maps.event.addDomListener(window, \'load\', initialize);

＆＃13;

			* {
			  box-sizing: border-box;
			}
			.clear {
			  clear: both;
			  display: block;
			  height: 0;
			  overflow: hidden;
			  visibility: hidden;
			  width: 0;
			}
			body {
			  overflow-x: hidden;
			  font-family: Arial, Helvetica, sans-serif;
			}
			.avoid {
			  margin: 4px 0;
			  page-break-inside: avoid !important;
			}
			.break_before {
			  clear: both;
			  display: block;
			  page-break-before: always;
			}
			.break_after {
			  clear: both;
			  display: block;
			  page-break-after: always;
			}
			.map_table,
			.main_table2 {
			  margin-left: 15px;
			  margin-right: 1px;
			  margin-top: 15px;
			  width: 640px;
			}
			.map_table {
			  page-break-inside: avoid;
			}
			.title {
			  color: #58595b;
			  font-size: 11px;
			  vertical-align: top;
			}
			.a_row .title {
			  margin-right: 0;
			  width: 100px !important;
			}
			.data {
			  vertical-align: top;
			  width: 255px !important;
			  color: #262262;
			  font-size: 11px;
			  font-weight: bold;
			  text-align: left;
			  text-transform: capitalize;
			}
			.a_row .data {
			  width: 220px !important;
			}
			.main_table2 .bottom_border {
			  border-bottom: 1px solid #CCC;
			}
			.main_table2 .bottom_border {
			  height: 0;
			  margin: 0;
			  padding: 0 !important;
			  width: 100%;
			}
			.main_table2 .a_cell,
			.main_table2 .a_title {
			  padding: 5px;
			}
			.map_table img {
			  padding: 10px;
			}
			.map_table .a_row {
			  border: 3px solid #262262;
			}
			.a_table {
			  display: block;
			  overflow: hidden;
			}
			.a_row,
			.a_comp_row {
			  display: block;
			  overflow: hidden;
			}
			.a_cell,
			.a_title {
			  display: inline-block;
			  float: left;
			  vertical-align: top;
			}
			.a_table,
			.a_title,
			.a_cell {
			  border: 0 none;
			}
			.page_table2 {
			  width: 670px !important;
			}
			.inner_table {
			  margin-left: 15px;
			  margin-right: 15px;
			  width: 640px;
			}
			.a_title {
			  font-weight: bolder;
			  background-color: #262262;
			  color: white;
			  text-align: left !important;
			}
			.dont_split {
			  page-break-inside: avoid !important;
			}
			.prior_transfer .a_row .title {
			  width: 110px!important;
			}
			.prior_transfer .a_row .data {
			  width: 210px!important;
			}
			p {
			  margin: 0 !important;
			  display: block;
			  margin-block-end: 1em;
			  margin-block-start: 1em;
			}
			@media print {
			  .web_only {
			    display: none;
			  }

＆＃13;

<body>
  <div class="page_table2 a_table">
    <div class="a_row">
      <div class="a_cell">
        <div class="a_table main_table2 inner_table dont_split prior_transfer">
          <div class="a_row">
            <div class="a_title" style="width: 100%;">
              <p>Prior Transfer</p>
            </div>
          </div>
          <div class="a_row">
            <div class="a_cell title">Recording Date:</div>
            <div class="a_cell data">2/11/2014</div>
            <div class="a_cell title">Doc #:</div>
            <div class="a_cell data">4242-424242</div>
          </div>
          <div class="bottom_border"></div>
          <div class="a_row">
            <div class="a_cell title">Transfer Amount:</div>
            <div class="a_cell data">$ 42,000</div>
            <div class="a_cell title">Doc Type:</div>
            <div class="a_cell data">-</div>
          </div>
          <div class="bottom_border"></div>
          <div class="a_row">
            <div class="a_cell title">Type of Sale:</div>
            <div class="a_cell data">Standard</div>
            <div class="a_cell title">Title Co:</div>
            <div class="a_cell data">Some Title Company</div>
          </div>
          <div class="bottom_border"></div>
        </div>
      </div>
    </div>
    <div class="a_row">
      <div class="a_cell">
        <div class="a_table map_table inner_table dont_split">
          <div class="a_row">
            <div class="a_title" style="width: 100%; height: 20px;">
              <p>Aerial Map</p>
            </div>
          </div>
          <div class="a_row">
            <div class="a_cell">

              <div id="googleMap" style="width:636px;height:380px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="a_row">
      <div class="a_cell">
        <div class="a_table main_table2 inner_table dont_split prior_transfer">
          <div class="a_row">
            <div class="a_title" style="width: 100%;">
              <p>Prior Transfer</p>
            </div>
          </div>
          <div class="a_row">
            <div class="a_cell title">Recording Date:</div>
            <div class="a_cell data">2/11/2014</div>
            <div class="a_cell title">Doc #:</div>
            <div class="a_cell data">4242-424242</div>
          </div>
          <div class="bottom_border"></div>
          <div class="a_row">
            <div class="a_cell title">Transfer Amount:</div>
            <div class="a_cell data">$ 42,000</div>
            <div class="a_cell title">Doc Type:</div>
            <div class="a_cell data">-</div>
          </div>
          <div class="bottom_border"></div>
          <div class="a_row">
            <div class="a_cell title">Type of Sale:</div>
            <div class="a_cell data">Standard</div>
            <div class="a_cell title">Title Co:</div>
            <div class="a_cell data">Some Title Company</div>
          </div>
          <div class="bottom_border"></div>
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

Answer 1

#googleMap {
 overflow:hidden;
}

Answer 2

最终有效的解决方法是将地图嵌入到iframe中。

（在解决方案的来源中：This one - 但其他几个人也有同样的建议）。

供参考，因为＆＃34;把它放在iframe中＃34;我需要做更多的研究，这是我们最终做的事情。我们把它放在一个单独的文件中（在我们的例子中是php，因为地图在不同的时间会有所不同，而不是直接将完整的地图脚本放在src的src中，而是一个简单的html页面，如果它是静态的会很好）然后那就是源头。

嵌入到网页中的Google Map在打印到wkhtmltopdf时会溢出其边界

2 个答案: