谷歌地图打印灰色打印

Question

谷歌地图打印灰色打印

Har*_*rsh 1 google-maps google-maps-api-3

我正在尝试打印 Google 地图页面，当我使用 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>

Run Code Online (Sandbox Code Playgroud)

输出

点击打印后颜色变成灰色

Answer 1

小智 5

仅解决方法。您可以添加 CSS 来修复此解决方案。

#map_canvas div > img {
    position: absolute;
}

Run Code Online (Sandbox Code Playgroud)

map_canvas是您为地图容器设置的 id。

归档时间：	7 年，1 月前
查看次数：	620 次
最近记录：	6 年，11 月前