Question

我正在尝试打印Google Maps页面，当我使用ctrl + P或单击div打印此页面时，它在横向模式下不起作用。

我正在Google Chrome浏览器版本上运行以下代码

Google Chrome是最新的版本69.0.3497.100（正式版本）（64位）

到目前为止，我的代码在下面。

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Circles</title>
  <style type="text/css" media="print">
    @media print {
      img {
        max-width: none !important;
      }
    }
  </style>
</head>

<body style="margin:0;width:800px;height:1000px" onload=initMap()>
  <div class="printdiv" style="border:1px solid red;" onclick="printMap()">Print</div>
  <div id="map" style="width:800px; height:1000px;"></div>
  <script>

    var map;

    var citymap = {
      chicago: {
        center: { lat: 41.878, lng: -87.629 },
        population: 2714856
      },
      newyork: {
        center: { lat: 40.714, lng: -74.005 },
        population: 8405837
      },
      losangeles: {
        center: { lat: 34.052, lng: -118.243 },
        population: 3857799
      },
      vancouver: {
        center: { lat: 49.25, lng: -123.1 },
        population: 603502
      }
    };

    function initMap() {
      // Create the map.
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 18,
        center: { lat: 37.090, lng: -95.712 },
        mapTypeId: 'terrain'
      });


      for (var city in citymap) {
        // Add the circle for this city to the map.
        var cityCircle = new google.maps.Circle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          center: citymap[city].center,
          radius: Math.sqrt(citymap[city].population) * 100
        });
      }

    }

    function printMap() {

      alert("resize new");
      var center = map.getCenter();
      map.setCenter(center);
      google.maps.event.trigger(map, 'resize');
      window.print();
    }

  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOsQrXRxsQapeKuZ7j2VvK-F-3A3VhGmU">
  </script>
</body>

</html>

输出

点击打印后颜色变灰

Answer 1

仅解决方法。您可以添加CSS来解决此问题。

#map_canvas div > img {
    position: absolute;
}

map_canvas是您设置为映射容器的ID。

Google地图打印时为灰色

1 个答案: