google-maps-api-3 - 通过php循环加载多个Google Map后的javascript window.print

Question

我通过php循环成功显示了多个地图。但是最后我叫window.print。我的问题是在加载地图之前已触发window.print，并且在打印页面上显示了空白。

这是我的示例代码：

{loop starts}

<div latitude="<?php echo $row['lat'];?>" longitude="<?php echo $row['lng'];?>" zoom="<?php echo $row['map_zoom_level'];?>"  class="map_canvas"></div>

{loop ends}

Javascript：

$(document).ready(function(){

   $('.map_canvas').each(function(index, Element) {
      var lat = $(Element).attr('latitude');
      var lng = $(Element).attr('longitude');

      var latlng = lat+','+lng;
      var zoomlevel = parseInt($(Element).attr('zoom'));

      var origin = new google.maps.LatLng(lat,lng)

      $(Element).gmap({'zoom': zoomlevel}).bind('init', function(ev, map) {
         $(Element).gmap('get','map').setOptions({'center':origin});
         $(Element).gmap('addMarker', {'position': latlng}).click();
      });
   });
   window.print();
});

谁能帮我解决这个问题。

Answer 1

您需要一个标志或可以在上一个循环后触发打印的东西，或者防止在地图渲染完成之前调用打印。

在最后一个项目之后，在循环内调用print

var canvasCount=$(".map_canvas').length;
$(document).ready(function(){
    $('.map_canvas').each(function(index, Element) {
        var lat = $(Element).attr('latitude');
        var lng = $(Element).attr('longitude');

        var latlng = lat+','+lng;
        var zoomlevel = parseInt($(Element).attr('zoom'));

        var origin = new google.maps.LatLng(lat,lng)

        $(Element).gmap({'zoom': zoomlevel}).bind('init', function(ev, map) {
            $(Element).gmap('get','map').setOptions({'center':origin});
            $(Element).gmap('addMarker', {'position': latlng}).click();
        });

        if (index==canvasCount) {
            window.print();
        }
    });
});

丑陋，打印正在调用自己，直到 initialized为真

var initialized = false;
$(document).ready(function(){
    $('.map_canvas').each(function(index, Element) {
        var lat = $(Element).attr('latitude');
        var lng = $(Element).attr('longitude');

        var latlng = lat+','+lng;
        var zoomlevel = parseInt($(Element).attr('zoom'));

        var origin = new google.maps.LatLng(lat,lng)

        $(Element).gmap({'zoom': zoomlevel}).bind('init', function(ev, map) {
            $(Element).gmap('get','map').setOptions({'center':origin});
            $(Element).gmap('addMarker', {'position': latlng}).click();
        });

        if (index==$(".map_canvas').length) initialized=true;
    });
});

function printMap() {
    if (initialized) {
        window.print();
    } else {
        setTimeout(printMap, 500);
    }
}

printMap();