如何使用PhantomJS从网页中获取googlemap的截图？

Question

我的要求是对网页的谷歌地图进行截图，我是在谷歌地图上动态绘制标记和折线，我是用PhantomJS进行截图，但是截图并不是对网页上显示的完整的谷歌地图进行截图。

Html and javascript for loading and display google map
----------
     <script>
            function initMap() {
                    var mapOptions = {
                        zoom: 15,
                        center: new google.maps.LatLng(28.5354383, 77.26393259999998)
                    };
                    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    var project_id = $('#project').data('url')
                    var latt = substation[0]
                    var lngg = substation[1]
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(latt, lngg),
                        title: new google.maps.LatLng(latt, lngg).toUrlValue(6),
                        map: map,
                        draggable: true,
                        label: {
                            color: 'black',
                            fontWeight: 'bold',
                            text: "Sub-Station",
                        },
                        icon: {
                            labelOrigin: new google.maps.Point(4, 25),
                            url: '/assets/sub_station.png',
                        }
                    });
                    google.maps.event.addListener(marker, "dragend", function(event) {
                        $.getScript("/update_pole.js?project_id=" + project_id + "&Type=SS" + "&new_cordinated=" + event.latLng.toString().slice(1, -1), function(data) {});
                    });
                    var lattt = feeder[0]
                    var lnggg = feeder[1]
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lattt, lnggg),
                        title: new google.maps.LatLng(lattt, lnggg).toUrlValue(6),
                        map: map,
                        draggable: true,
                        label: {
                            color: 'black',
                            fontWeight: 'bold',
                            text: "Feeder",
                        },
                        icon: {
                            labelOrigin: new google.maps.Point(4, 25),
                            url: '/assets/ptw.png',
                        }
                    });

var page = require('webpage').create();
  page.open('https://medhajtest.herokuapp.com/admin/visibilities/demo?id=586b524712598e0004f440d0', function() {
  page.viewportSize = { width: 1440, height: 900 };
  var clipRect = page.evaluate(function(){
    return document.querySelector("div#map").getBoundingClientRect();
  });
  page.render('github.png');
  phantom.exit();
});

Answer 1

注意屏幕截图的大小，400x300。这是默认的PhantomJS视口大小。在打开页面之前，必须设置所需的视口大小。

var page = require('webpage').create();

// Got to set this before opening a page
page.viewportSize = { width: 1440, height: 900 };

page.open('https://medhajtest.herokuapp.com/admin/visibilities/demo?id=586b524712598e0004f440d0', function() {
    var clipRect = page.evaluate(function(){
        return document.querySelector("div#map").getBoundingClientRect();
    });
    page.render('github.png');
    phantom.exit();
});