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

Question

在Mac上的Chrome或Safari中打印以下示例页面(即WebKit)会在第二张地图的打印输出中生成错误放置的地图图块.它适用于网页本身,打印它似乎也适用于Firefox.但是,它需要在Chrome或Safari中运行.

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

(例如,参见第2页上的道路US421的位移.)

它看起来像只影响打印的缓存问题.但清除缓存或私人/隐身浏览并不能解决问题.

虽然在示例中所有地图部分都是相同的,但是不同地图也会出现问题(例如,在示例中尝试平移和缩放).

我可以使用部分解决方案,我可以在自己的浏览器中使用它 - 也就是说,它不必为每个人工作,但它必须是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_canvasDIV.因此,.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>