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

时间：2015-05-26 23:49:30

标签： google-maps google-chrome google-maps-api-3 printing webkit

在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>

1 个答案:

答案 0 :(得分：5)

我找到了解决方法，我认为它是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已更改）：

＆＃13;
＆＃13; 
// 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题