谷歌地图图像与路线打印方向

问题是，当我尝试打印div内容时，路由没有用它打印。我已经阅读了以下链接-打印谷歌地图上的方向
，但徒劳。我还阅读了谷歌地图静态图像api-https://developers.google.com/maps/documentation/staticmaps/#Paths但我认为没有机制打印地图图像与路线。

我的代码是-

function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data) 
{
var mywindow = window.open('', 'map-canvas', 'height=1200,width=700');
mywindow.document.write(data);
mywindow.print();
mywindow.close();
return true;
}
var display = new google.maps.DirectionsRenderer({draggable: true});
var dirService = new google.maps.DirectionsService();
function initialize() {
var exCentre = new google.maps.LatLng(x1, y1);
var boardPoint = new google.maps.LatLng(x2, y2); // x1, y1, x2, y2 are coordinates
var amarker = new google.maps.Marker({position:exCentre});
var bmarker = new google.maps.Marker({position:boardPoint});

var mapOptions = {zoom:10,center: exCentre};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
amarker.setMap(map);
bmarker.setMap(map);
display.setMap(map);
display.setOptions( { suppressMarkers: true } );
var request = {origin: exCentre, destination: boardPoint,travelMode: google.maps.TravelMode.DRIVING};
dirService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK){
display.setDirections(response);}
});
}
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas{
margin: 0;
padding: 0;
width: 1000px;
height: 500px;
}

<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript" ></script>
</head>
<body>
	<div id="map-canvas"></div>
	<input type="button" value="Print Div" onclick="PrintElem('#map-canvas')" />
</body>
</html>

请帮忙。提前感谢

问题是，路线将通过<canvas/>-方法绘制，结果不会反映在map元素的innerHTML中，因此路线可能不会被"复制"。

对于给定的文档结构(map元素是主体的直接子元素)，您可以遵循链接问题中的建议：创建一个打印样式表，并使用CSS使其仅打印地图。

var x1 = 52,
y1 = 13,
x2 = 53,
y2 = 14;
var display = new google.maps.DirectionsRenderer({
draggable: true
});
var dirService = new google.maps.DirectionsService();
function initialize() {
var exCentre = new google.maps.LatLng(x1, y1);
var boardPoint = new google.maps.LatLng(x2, y2); // x1, y1, x2, y2 are coordinates
var amarker = new google.maps.Marker({
position: exCentre
});
var bmarker = new google.maps.Marker({
position: boardPoint
});
var mapOptions = {
zoom: 10,
center: exCentre
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
amarker.setMap(map);
bmarker.setMap(map);
display.setMap(map);
display.setOptions({
suppressMarkers: true
});
var request = {
origin: exCentre,
destination: boardPoint,
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
margin: 0;
padding: 0;
width: 1000px;
height: 500px;
/*ensure that the map is also visible when printing*/
display: block !important;
}
@media print {
/* hide anything */
body>* {
display: none;
}
}

<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="Print Div" onclick="window.print()" />
<div id="map-canvas"></div>
</body>
</html>

相关内容

最新更新

热门标签：