在 WebKit 中打印具有多个嵌入 Google 地图的页面会产生图块错误

Question

在 Chrome 或 Mac 上的 Safari（即 WebKit）中打印以下示例页面会在从第二张地图开始的打印输出中产生错位的地图图块。它适用于网页本身，打印它似乎也适用于 Firefox。不过，需要它在 Chrome 或 Safari 中工作。

示例页面：http://matsch.binaervarianz.de/tmp/print_entries.html
页面的打印到 PDF 输出：http://matsch.binaervarianz.de/tmp/print_entries.pdf

（参见第2页以上US421道路的位移）

看起来像是只影响打印的缓存问题。但是清除缓存或 private/incognito 浏览并不能解决问题。

虽然在示例中所有地图部分都是相同的，但不同的地图也会出现此问题（例如，尝试在示例中进行平移和缩放）。

我可以接受部分解决方案，我可以让它在我自己的浏览器中运行——也就是说，它不一定适用于所有人，但它必须是 Webkit（Safari 或 Chrome ).不能为此使用 Firefox...

如果这对每个人都有效，加分。

下面是一些如何初始化地图的代码。更多内容在上面的示例页面中。

// first map
var snippets = [];
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510463",
  snippet_location_long: "-86.2288448"
});

var mapData_2899_1 = {
  snippets: snippets,
  entry_approx_location_lat: "",
  entry_approx_location_long: ""
};

showMap(mapData_2899_1, "2899_1");

// second map
snippets = [];
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510639",
  snippet_location_long: "-86.2287998"
});
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510739",
  snippet_location_long: "-86.2288998"
});

var mapData_2899_3 = {
  snippets: snippets,
  entry_approx_location_lat: "",
  entry_approx_location_long: ""
};

showMap(mapData_2899_3, "2899_3");

// show map function
function showMap(d, primKey) {
  $( '#map-' + primKey ).addClass('map-canvas');

  var mapOptions = {
    center: { lat: 39.9513164, lng: -86.2274201 },
    streetViewControl: false, zoom: 12,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(document.getElementById('map-' + primKey), mapOptions);

  $.each(d.snippets, function( i, snippet ) {

    // location when snippet was recorded
    if (snippet.snippet_location_lat !== "" && snippet.snippet_location_long !== "") {
      var snippetLoc = new google.maps.LatLng(
        p(snippet.snippet_location_lat),
        p(snippet.snippet_location_long)
      );
      var marker = new google.maps.Marker({ position: snippetLoc, map: map });
    }

    // approximate location taking into account how long ago the event reportadly took place
    if (snippet.snippet_approx_location_lat !== "") {
      var snippetApproxLocation = new google.maps.LatLng(
        p(snippet.snippet_approx_location_lat),
        p(snippet.snippet_approx_location_long)
      );
      var marker2 = new google.maps.Marker({
        position: snippetApproxLocation,
        map: map,
        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
      });
    }
  });

  // approximate location at corrected time from diary entry
  if (d.entry_approx_location_lat !== "") {
    var entryApproxLocation = new google.maps.LatLng(
      p(d.entry_approx_location_lat),
      p(d.entry_approx_location_long)
    );
    var marker3 = new google.maps.Marker({
      position: entryApproxLocation,
      map: map,
      icon: 'https://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
    });
  }
}

function p( string ) {
  if (string === null)
    return "";
  else
    return string;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO_bHfTaLLr2Ugghz1hQ2QIZdRaa0SKX0"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style type="text/css">
.map-canvas {
    width: 325px;
    height: 325px;
    float: right;
    margin: 5px;
}
</style>

<div id="map-2899_1" class="map-canvas"></div><br><br>
<div id="map-2899_3" class="map-canvas"></div>

Answer 1

我找到了我认为是 WebKit 中错误的解决方法。由于地图图块的缓存似乎不是问题，我开始使用 CSS display 和 position 属性。

将 display:inline-block; 添加到我的 .map_canvas 似乎解决了打印输出中的问题……现在这些图块都是正确的。 display:inline; 单独没有相同的效果；我不知道为什么 inline-block 解决了这个问题。

（因为在我的特殊情况下我想要映射到 float:right; 我不得不在 .map_canvas div 周围放置一个包装器。所以，.map_canvas 有 display:inline-block; 而 .map-container 有 float:right;.)

所以，在 WebKit 中，在一个页面上打印多个地图的支持似乎有问题，或者我没有完全理解它。

这里是工作示例页面：http://matsch.binaervarianz.de/tmp/print_entries-solution.html 这是该页面的 Print-to-PDF 输出：http://matsch.binaervarianz.de/tmp/print_entries-solution.pdf

这是工作代码（只有 HTML/CSS 发生了变化）：

// first map
var snippets = [];
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510463",
  snippet_location_long: "-86.2288448"
});

var mapData_2899_1 = {
  snippets: snippets,
  entry_approx_location_lat: "",
  entry_approx_location_long: ""
};

showMap(mapData_2899_1, "2899_1");

// second map
snippets = [];
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510639",
  snippet_location_long: "-86.2287998"
});
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510739",
  snippet_location_long: "-86.2288998"
});

var mapData_2899_3 = {
  snippets: snippets,
  entry_approx_location_lat: "",
  entry_approx_location_long: ""
};

showMap(mapData_2899_3, "2899_3");

// show map function
function showMap(d, primKey) {
  $( '#map-' + primKey ).addClass('map-canvas');

  var mapOptions = {
    center: { lat: 39.9513164, lng: -86.2274201 },
    streetViewControl: false, zoom: 12,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(document.getElementById('map-' + primKey), mapOptions);

  $.each(d.snippets, function( i, snippet ) {

    // location when snippet was recorded
    if (snippet.snippet_location_lat !== "" && snippet.snippet_location_long !== "") {
      var snippetLoc = new google.maps.LatLng(
        p(snippet.snippet_location_lat),
        p(snippet.snippet_location_long)
      );
      var marker = new google.maps.Marker({ position: snippetLoc, map: map });
    }

    // approximate location taking into account how long ago the event reportedly took place
    if (snippet.snippet_approx_location_lat !== "") {
      var snippetApproxLocation = new google.maps.LatLng(
        p(snippet.snippet_approx_location_lat),
        p(snippet.snippet_approx_location_long)
      );
      var marker2 = new google.maps.Marker({
        position: snippetApproxLocation,
        map: map,
        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
      });
    }
  });

  // approximate location at corrected time from diary entry
  if (d.entry_approx_location_lat !== "") {
    var entryApproxLocation = new google.maps.LatLng(
      p(d.entry_approx_location_lat),
      p(d.entry_approx_location_long)
    );
    var marker3 = new google.maps.Marker({
      position: entryApproxLocation,
      map: map,
      icon: 'https://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
    });
  }
}

function p( string ) {
  if (string === null)
    return "";
  else
    return string;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO_bHfTaLLr2Ugghz1hQ2QIZdRaa0SKX0"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style type="text/css">
.map-container {
    float: right;
    margin-left: 5px;
}

.map-canvas {
    width: 325px;
    height: 325px;
    display: inline-block;
}
</style>

<div class="map-container">
    <div id="map-2899_1" class="map-canvas"></div>
</div>
<br><br>
<div class="map-container">
    <div id="map-2899_3" class="map-canvas"></div>
</div>

在 WebKit 中打印具有多个嵌入 Google 地图的页面会产生图块错误

Printing page with multiple embedded Google Maps in WebKit produces tile errors

printing

google-maps

webkit

google-chrome

google-maps-api-3