javascript - 带有路线打印的谷歌地图图像

问题是，当我尝试打印 div 内容时，路线并没有打印出来。我已阅读以下链接 - Print google map with directions on it
但徒劳无功。我还阅读了 Google map 静态图像 API - https://developers.google.com/maps/documentation/staticmaps/#Paths但我认为没有将 map 图像与路线一起打印的机制。

我的代码是 -

    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/>绘制-methods ，结果不会被map-element的innerHTML反射(reflect)出来，所以路由可能不会被“复制”。

对于给定的文档结构( map 元素是正文的直接子元素)，您可以遵循链接问题中的建议:create a print stylesheet and use a CSS to make it only print out the map .

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>

关于javascript - 带有路线打印的谷歌地图图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29585758/

javascript - 带有路线打印的谷歌地图图像

上一篇：javascript - Flotr2 颜色不起作用

下一篇：javascript - 将 Phantomjs 控制台传递给 php 文件