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

您需要一个标志或某些东西，可以在最后一个循环后触发打印，或者在渲染完地图之前阻止打印。

在最后一项

之后调用循环内的打印

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

通过php循环加载多个谷歌地图后的javascript window.print

1 个答案: