gpt4 book ai didi

javascript - 如何将 Google map 导出为包含自定义标记的图像?

转载 作者:行者123 更新时间:2023-11-29 17:57:22 30 4
gpt4 key购买 nike

根据 this answer 上的建议,我正在使用 html2canvas 库将 Google map 导出为图像。

我正在研究 AngularJS。这是我正在使用的代码:

$scope.shareMap = function(){
var element = $("#mapDiv");
html2canvas(element, {
useCORS: true,
onrendered: function(canvas) {
var dataUrl= canvas.toDataURL("image/png");

// DO SOMETHING WITH THE DATAURL
// Eg. write it to the page
document.write('<img src="' + dataUrl + '"/>');
}
});
};

问题是,它不会导出我动态生成的标记。此标记是根据 AJAX 调用的响应生成的。

这是网络上标记的样子: Map with markers, before exporting

这就是它导出的内容: enter image description here

此外,我注意到如果我在 map 上平移,"new"显示区域会显示为灰色,如下所示: enter image description here

它似乎只能导出 map 第一次呈现时显示的内容(仅导出特定视口(viewport)上的 map ,没有标记和 map 的任何其他区域)。

是否可以使用同一个库来解决我的问题?或者你能推荐另一种方法吗?谢谢!

最佳答案

类似PhantomJS 的工具可以帮助您编写脚本来自动截取网页的屏幕截图(您使用 Google Maps JavaScript API 绘制的网页)。

我有一个使用 PhantomJS 截取页面截图的小例子。

这是包含一些信息的 JavaScript map :http://jsbin.com/pevizusana/2/edit

<html> 
<head>
<title>PhantomJS Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<style type="text/css">
body {
margin: 0;
}
#map {
width:100%;
height:100%;
}
#loaded {
display: block;
}
</style>
<script type='text/javascript'>

function initialize() {
var myLatlng = new google.maps.LatLng(44.65905179951626, 8.3835928124999555);
var myOptions = {
zoom: 7,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);

var decodedPath = google.maps.geometry.encoding.decodePath('klhrG}nmg@olFmlInT}uJ{mC_tDhjEymNi}@_|GieEnAsGspIihF{pBopBe~Nr`B_xB}sEqhJm`FkeAsfHheDcmE}vI}bCdF_eCclC}iIpuOoqJisEdjF_y@|l@gmNgsGwcH{Lm`Ty|Ko{Tet@gaNrrDgiGlmAwcWccHgqQl`@egMk|BdY{iDgdG}aH`qEupFcfE{fLlmM{pLarAepH|yAccBm`BqdH{EotCg_EszAsiS}{B\\afAkgCwcDhkAmxDecAikAirMatBgj@ucAq{E__G}}A{pGfdDm`GjdIsuEg|HqOcxKo{Dg~BgbAsmForBsIkqA}pHo~Bo[ybA|lDsrB{iByzEm`[fiB{`BxaOg\\ftD`\\pzE`lFdxEorD`rAhqA~gEmnPnnIa`G`x@gtDfnAj{@~bCstBhqCmbStcBjy@lhIqpClfXj{]b~KqxCxpEvvFffCxH~nHm|FvaBaoJfgF~mApAq{Fr|A`fAtwCuqBm]zlD|zB_PhhCkyFfjCf|@luJobCvdE{gMfsCqDjuDizB{BymBvyFsiBp_BpcW~xDimG`oA|mFxlEdr@z`A|`DdCzzCuyEfx@o|D~tEcZfuLhtBd}Cn`DeeAzzC|wF~AquB`iBbPwTmbCzsCet@dk@frBna@w`EtzBxlEflB_zCdc@`rC{z@_lIdzEzxEj`He|LxyBt^fdEqeFrwExeAzlCqwC_~Bu}H~cEs`K_iBed@dMsdCiuAfV__DaiPdlMkjEg@orG`dE_}BtkA~dAptEc{D|~Bk~I`vCowAr{ArbCxkEurCtMegPblGcbAxwBmdGniLvxA~nPqUr_CbvKedIfzJbgAvmEyaIruDm~@xhOdiFrnHzeDejDt}Hym@_DrzPltB_P~yBntEjlC_g@rnAtnAoWfdCimE{Ba`JhmIy]xrPjyDxaDzqA}yAx{BhpFvcB{Lm~AhqSx{CfcCibBd`ElaFnbDhjAplEo_Cv_AqaCbbNmjCfvBbzA~qDn|DvP~`@dyCjgHubDt_DxxAlaCvvJnpFnTvrApoFncE~ZkpA`aDlnA~lBrdDqhElfCjkDlpAqoBloCjaB|mFyeExqE`tDgcAh_J~kBhhErqBamEnmBfh@_M~yViaFltVb}E`hHrfComBaCodD`mCnxGm`C}[mmHhgIkmGmqBwRloHblDtdBck@z{ItaDroYxiBb]mQ~vKeyD`dBz\\jiKstJzzPiyEfdb@}rG`gA}~AvhFgaBwMg|FzpFk_AhxEyjJwa@_{@ozI{aIlbMigIdyBauF}}MwxD{ZafBs`EkmEvbC_|Cg}Aua@{bU}|D|}@_cBzhFwcGxi@gmBneCeuEgtCazFn`QfuBt}Boe@dmHqyIt{TukDgx@{JthB_aDkkCcuD|mDkoCos@ue@dcM{_I|eAuoCjtD ');

var setRegion = new google.maps.Polygon({
path: decodedPath,
fillColor: "#0000FF",
fillOpacity: 0.2,
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
document.getElementById("loaded").innerText = "true";
});
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
<div id="loaded"></div>
</body>
</html>

这里是 PhantomJS 代码,将在这个网站上截取屏幕截图:http://pastebin.com/gEXhG1dP

/*
* Captures a webpage with a Google JavaScript Map and exports it to PNG.
*/
//Original code: https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js

function waitFor(testFx, onReady, timeOutMillis) {
var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000, //< Default Max Timout is 3s
start = new Date().getTime(),
condition = false,
interval = setInterval(function() {
if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
// If not time-out yet and condition not yet fulfilled
condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
} else {
if(!condition) {
// If condition still not fulfilled (timeout but condition is 'false')
console.log("'waitFor()' timeout");
phantom.exit(1);
} else {
// Condition fulfilled (timeout and/or condition is 'true')
console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");
typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
clearInterval(interval); //< Stop this interval
}
}
}, 250); //< repeat check every 250ms
};


var page = require('webpage').create();
page.viewportSize = {
width: 1000,
height: 1000
};

page.open("http://jsbin.com/pevizusana", function (status) { //Works best on localhost
// Check for page load success
if (status !== "success") {
console.log("Unable to access network");
} else {
// Wait for 'signin-dropdown' to be visible
waitFor(function() {
// Check in the page if a specific element is now visible
return page.evaluate(function() {
return document.getElementById("loaded");
});
}, function() {
console.log("The map should be visible now.");
page.render('googleScreenShot' + '.png');
phantom.exit();
});
}
});

结果如下: http://i.imgur.com/Mj951aP.jpg

enter image description here

希望这些信息对您有所帮助。

关于javascript - 如何将 Google map 导出为包含自定义标记的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37926727/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com