Google Map在打印時未顯示

我試圖使用Google Maps API爲內部站點實施簡單的路線規劃。我想出了以下內容：Google Map在打印時未顯示

http://jsfiddle.net/Hn7U8/6/ （如果你的窗口太小，你可能看不到地圖）

完整的HTML代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Map</title> 
    <style> 
     html, body, #map-canvas{ 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <style> 
     #directions-panel { 
     height: 100%; 
     float: right; 
     width: 390px; 
     overflow: auto; 
     } 

     #map-canvas { 
     margin-right: 400px; 
     } 

     #control { 
     background: #fff; 
     padding: 5px; 
     font-size: 14px; 
     font-family: Arial; 
     border: 1px solid #ccc; 
     box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4); 
     display: none; 
     } 

     @media print { 
     #map-canvas { 
      height: 500px; 
      margin: 0; 
     } 

     #directions-panel { 
      float: none; 
      width: auto; 
     } 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var mapOptions = { 
    zoom: 14, 
    center: new google.maps.LatLng(48.1448, 11.5580) 
    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directions-panel')); 

    var control = document.getElementById('control'); 
    control.style.display = 'block'; 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control); 
} 

function calcRoute() { 
    var start; 
    if((start = document.getElementById('origin').value) == ""){ 
    start = "Bayerstraße 28, München"; 
    } 
    var selectedMode = document.getElementById('mode').value; 
    var end = 'Riesstraße, München'; 
    var request = { 
    origin: start, 
    destination: end, 
    travelMode: google.maps.TravelMode[selectedMode] 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body onload="calcRoute();"> 
    <div id="control"> 
    <b>Start-Adresse:</b> 
    <form action="javascript:void(0);" onsubmit="calcRoute();"> 
     <input type="text" id="origin" placeholder="Adresse, Stadt"> 
    </form> 
    <b>Reiseart: </b> 
    <select id="mode" onchange="calcRoute();"> 
     <option value="DRIVING">Auto</option> 
     <option value="WALKING">Laufen</option> 
     <option value="BICYCLING">Fahrrad</option> 
     <option value="TRANSIT" selected>Öffentlich</option> 
    </select> 
    </div> 
    <div id="directions-panel"></div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

一切正常，我想它至。如果插入

街，國家/城市

例如

BAYERSTRASSE 28，慕尼黑

有了你可以調整你的出行方式滑塊（散步，乘汽車去，...）

它顯示在地圖上，並顯示附加路線信息（時間，距離......）在右側。

但是，當您嘗試打印/預覽頁面（我不知道有多好，這是可重複使用的jsfiddle）地圖沒有顯示，你只看到一些灰色（空）域，看起來像的背景這裏引用SO。附加信息正確打印/顯示。

是什麼導致此打印問題？

我試着搞了一下CSS，因爲我認爲這可能是問題，但我沒有設法解決問題。

來源

2013-12-16 whateverrest

似乎做工精細這裏。我得到你的地圖。 – putvande

您可以在小提琴中看到地圖，也可以在打印預覽中顯示地圖嗎？ – whateverrest

它也顯示在預覽/打印。在Windows 7上使用Chrome 32 – putvande

爲了解決這個問題，你可以在你的CSS表添加以下代碼：

img { 
    max-width: none !important; 
}

來源

2017-03-15 05:56:45 Whitealien

這解決了谷歌地圖在打印模式下不可見的問題！ – Pavlito

Google Map在打印時未顯示

回答

相關問題