如何使用幻影从网页上截取googlemap的截图？
如何使用幻影从网页上截取googlemap的截图？
提问于 2017-02-23 08:11:45
我的要求是抓取网页的谷歌地图的屏幕截图，我在谷歌地图上动态绘制标记和折线，我用PhantomJS进行屏幕shot.But截图，没有捕捉到在网页上显示的完整的Google。
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();
});
预期屏幕截图
当前即将到来的屏幕快照
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-23 09:19:05
注意屏幕截图的尺寸，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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42410248
复制相关文章
相似问题
腾讯云开发者
