打印时未显示Google Map [英] Google Map not shown when printing
问题描述
我正尝试使用Google Maps API为内部站点实施简单的路线规划.我提出了以下建议:
I was trying to implement a easy route planning with Google maps API for an internal site. I came up with the following:
http://jsfiddle.net/Hn7U8/6/(如果您的窗口太小，则可能看不到地图)
http://jsfiddle.net/Hn7U8/6/ (If your window is too small, you might not see the map)
完整的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>
一切正常.如果您插入
街道，国家(地区)/城市
street, country/city
例如
慕尼黑Bayerstraße28，
Bayerstraße 28, München
使用滑块，您可以调整行进方式(步行，开车，...)
With the slider you can adjust the way you travel (Walking, going by car, ...)
它会在地图上显示它，并在右侧显示其他路线信息(时间，距离，...).
It displays it on the map and shows the additional route information (time, distance, ...) on the right.
但是，当您尝试打印/预览页面时(我不确定使用jsfiddle可以再现多好).地图未显示，您只会看到一些灰色(空)字段看起来像是SO上引号的背景.正确打印/显示了其他信息.
However when you try to print/preview the page (I am not sure how good that's reproducible using jsfiddle) map is not shown and you only see some grey (empty) field that looks like the background of quotes here on SO. The additional information are printed/shown correctly.
是什么原因导致此打印问题?
我尝试过弄乱CSS，因为我认为这可能是问题所在，但我没有设法解决问题.
I tried messing with the CSS a bit, because I thought that might be the problem but I did not manage to solve the problem.
推荐答案
要解决此问题，您可以在CSS工作表中添加以下代码:
To solve this you can add the following code in your css sheet:
img {
max-width: none !important;
}
这篇关于打印时未显示Google Map的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
