Question

问题在于，当我尝试打印div内容时，路径不会打印出来。我已阅读以下链接 - Print google map with directions on it
但是徒劳无功我还阅读了谷歌地图静态图片api - https://developers.google.com/maps/documentation/staticmaps/#Paths，但我认为没有机制可以打印地图图像和路线。

我的代码是 -

＆＃13;

    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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

请帮助。提前致谢

Answer 1

问题是路由将通过<canvas/> - 方法绘制，结果不会被map-element的innerHTML反映出来，因此路径可能不会被复制＆＃34;

使用给定的文档结构（map-element是正文的直接子元素），您可以按照链接问题中的建议进行操作：create a print stylesheet and use a CSS to make it only print out the map。

＆＃13;

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);

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

谷歌地图图像与路线打印

1 个答案: