嵌入到网页中的谷歌地图在打印到wkhtmltopdf时会溢出其边界
Google Map embedded into webpage overflows its boundaries when printed to wkhtmltopdf
我正在尝试追踪一个奇怪的错误，其中嵌入的Google地图在页面的HTML版本中看起来很好，但是当我们使用wkhtmltopdf对其进行PDF化时，地图在保留在其框中的同时，也会继续进入相邻页面。 换句话说，如果地图位于页面底部，则下一页将有更多地图（如果地图更大，地图的下一部分会有更多的地图）与顶部的内容重叠。 如果地图位于页面顶部，则上一页将获取额外的地图内容。三种格式的同一页面。请原谅粗糙的MS Paint匿名化。
我尝试了很多东西，包括：
- 到
- 处添加额外的div（之前，之后，立即之前、之后等）
- 为地图所在的div 及其包含的div 尝试不同的溢出值
- 注释掉地图上的叠加层
- 尝试使用我的谷歌福找到解决方案失败 了
- 可能还有其他几件事我现在不记得了。
有人见过这样的事情吗？ 关于可能导致它的原因的任何想法，或者我应该探索的方向建议？
仅在https://jsfiddle.net/cosmos42/wj81zc13/1/上摆弄相关部分 - 希望它拥有所有必要的信息。 我把我们的URL和其他识别信息从小提琴中取出，所以谷歌地图实际上不起作用......
提前感谢您的帮助。
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); * {
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;
}
<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>#googleMap {
overflow:hidden;
}
最终有效的解决方法是将地图嵌入到iframe中。
（在有解决方案的来源中：这个 - 但还有其他几个人有同样的建议）。
作为参考，由于"把它放在iframe中"需要我做更多的研究，这就是我们最终所做的。 我们没有直接将完整的地图脚本放在 iframe 的 src 中，而是将其放在一个单独的文件中（在我们的例子中，php，因为地图在不同时间会有所不同，但如果它是静态的，则使用纯 html 页面就可以了），然后让它成为源代码。
相关文章：
- 上传带有XMLHttprequest的文件-多部分/表单数据中缺少边界
- 对于如何在没有modernizr的情况下用边界半径的功能检测检查来替换我的旧浏览器检查
- 仅在边界内时替换特定字符
- 将谷歌地图中的平移边界设置为图像覆盖
- 将边界设置为overlayImage谷歌地图
- 为什么不是't这=>边界“;这个“;到周围的范围
- 获取以屏幕像素为单位的旋转SVG元素的边界
- RegEx:在单词边界添加加号
- 我如何才能获得Facebook在边界内的位置列表
- 精灵从pixi到p2的边界多边形
- CSS 溢出边界半径鼠标事件
- jQuery根据鼠标位置计算DIV偏移量和边界
- 世界的最大纬度和长边界 - 谷歌地图API LatLngBounds(）.
- 谷歌地图API地理编码器，受边界限制
- 由于找不到多部分边界，请求被拒绝
- 谷歌地图的多段线边界
- wkhtmltopdf超时错误
- ExtJS 4.2.1-具有动态高度的边界布局
- 为什么可以't我得到了这个d3.js文本的边界框
- 嵌入到网页中的谷歌地图在打印到wkhtmltopdf时会溢出其边界
