google-maps - PhantomJS 无法加载谷歌地图

Question

我的最终目标是打开一个嵌入了 javascript 的本地 html 文件，创建一个带有多边形的 map ，并使用 PhantomJS 对其进行截图。为此，我编写了一个简单的 JS 文件:

var page = require('webpage').create();
page.open('https://www.google.com/maps', function(status) {
  console.log('State: ' + status);
  if(status === 'success') {
      page.render('example.pdf', {format: 'pdf', quality: '100'});
  }
  phantom.exit();
}); 

这将返回错误:

ReferenceError: Can't find variable: google

我已经在本地 html 文件和使用谷歌地图的其他网站上尝试过这个，但我一直收到同样的错误。我已经成功地在没有谷歌地图的情况下截取了其他网站的截图。在互联网上搜索似乎人们没有遇到过这样的问题，并且已经成功地用谷歌地图截取了页面的截图......所以我想知道可能出了什么问题。

另一个注意事项:我在我的 rails 项目中将 PhantomJS 作为 gem 安装，并使用这个 gem 通过 rails 控制台运行 javascript 文件。我已经使用 PhantomJS (v 2.0.0) 的标准安装进行了尝试，但它仍然无法正常工作。

Answer 1

您必须等待 DOM 中的元素。
例如在 maps.google.com 上，您可以等待加载所有图 block 后加载的水印。

var page = require('webpage').create();
page.open('https://www.google.com/maps', function (status) {
    console.log('State: ' + status);
    if (status === 'success') {
        waitFor(function () {
            return page.evaluate(function () {
                var document_contains_watermark =
                    document.body.contains(document.getElementById('watermark'));
                return document_contains_watermark;
            });
        }, function () {
            page.render('maps-google-com.pdf', {format: 'pdf', quality: '100'});
            phantom.exit();
        });
    }
});

function waitFor(testFn, onReady) {
    var loaded = false;
    var interval = setInterval(function () {
        loaded = testFn();
        if (loaded) {
            onReady();
            clearInterval(interval);
        }
    }, 1000);
}

如果您想在您开发的页面上截取屏幕截图，请使用与上述相同的逻辑，但您自己在 google maps 空闲事件上附加一个元素。

google.maps.event.addListenerOnce(map, 'idle', function () {
    var loadedElem = document.createElement('div');
    loadedElem.setAttribute("id", "idLoadedElem");
    document.body.appendChild(loadedElem);
});