Javascript 如何将谷歌地图导出到包含自定义标记的图像？_Javascript_Angularjs_Google Maps_Google Maps Api 3

Javascript 如何将谷歌地图导出到包含自定义标记的图像？

javascript angularjs google-maps google-maps-api-3

Javascript 如何将谷歌地图导出到包含自定义标记的图像？,javascript,angularjs,google-maps,google-maps-api-3,Javascript,Angularjs,Google Maps,Google Maps Api 3,正如上面所建议的，我正在使用html2canvas库将Google地图导出到图像我正在研究AngularJS。这是我正在使用的代码： $scope.shareMap = function(){ var element = $("#mapDiv"); html2canvas(element, { useCORS: true, onrendered: function(canvas) {

正如上面所建议的，我正在使用html2canvas库将Google地图导出到图像

我正在研究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 + '"/>');
            }
        });
    };

$scope.shareMap=function（）{
var元素=$（“#mapDiv”）；
html2canvas（元素{
乌塞科尔斯：没错，
onrendered：函数（画布）{
var dataUrl=canvas.toDataURL（“image/png”）；
//对DATAURL执行一些操作
//把它写在纸上
文件。写（“”）；
}
});
};

问题是，它不是导出动态生成的标记。这些标记是基于AJAX调用的响应生成的

这是web上标记的外观：

这就是它的出口：

此外，我注意到，如果在地图上平移，“新”显示区域显示为灰色，如下所示：

它似乎只能导出第一次渲染贴图时显示的内容（仅导出该特定视口上的贴图，而不导出贴图的标记和任何附加区域）

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

像这样的工具可以帮助您编写脚本，自动获取网页的屏幕截图（您使用Google Maps JavaScript API绘制）

我有一个小例子，它使用PhantomJS对页面进行截图

以下是包含一些信息的JavaScript映射：


幻影试验
身体{
保证金：0；
}
#地图{
宽度：100%；
身高：100%；
}
#装载{
显示：块；
}
函数初始化（）{
var mylatng=new google.maps.LatLng（44.65905179951626,8.3835928124999555）；
变量myOptions={
缩放：7，
中心：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}我们的目标是{mC|tDhjEymNi}gieneasgsspiihf{pBopBe~Nr`B|xB}sEqhJm`fkeashfhedcme}vI}bCdF|eCclC}iIpuOoqJisEdjF|y@|l@gmNgsGwcH{Lm`Ty|Ko{Tet@gaNrrDgiGlmAwcWccHgqQl`@埃格姆克{iDgdG}啊{fLlmM{pLarAepH{yAccBm{BqdH{EotCg_EszAsiS}{B\\afAkgCwcDhkAmxDecAikAirMatBgj@ucAq{E_uug}}A{pGfdDm`GjdIsuEg`HqOcxKo{Dg~BgbAsmForBsIkqA}pHo~Bo[ybA | lDsrB{iByzEm`[fiB{BxaOg\\ftD`\\pzE`lFdxEorD`rAhqA~ gemnp`G`x@gtDfnAj{@~bCstBhqCmbStcBjy@lhIqpClfXj{]b~kqxcevfffcxh~nHm | fvababojfgf~mApAq{Fr | A`fAtwCuqBm]zlD | zB | PhhCkyFfjCf |@luJobCvdE{gMfsCqDjuDizB{BymBvyFsiBp|BpcW~xdimgoa|mFxlEdr@z`A|`DdCzzCuyEfx@o|D~tEcZfuLhtBd}Cn`DeeAzzC | wF~AquB`iBbPwTmbCzsCet@dk@frBna@w`Etzbxleflbzcdc@`rC{z@_lIdzEzxEj`他| LxyBt | fdEqeFrwExeAzlCqwC u ~ Bu}H~cEs`K_iBed@dMsdCiuAfV__DaiPdlMkjEg@orG`dE|BtkA~dAptEc{D| ~Bk~I`vCowAr{ArbCxkEurCtMegPblGcbAxwBmdGniLvxA~nPqUr_CbvKedIfzJbgAvmEyaIruDm~@xhodifrnhzejdt}Hym@_DrzPltB_P~yBntEjlC_g@rnAtnAoWfdCimE{Ba`JhmIy]xrPjyDxaDzqA}yAx{bhpvcb{Lm~AhqSx{CFCCIBD`elafnbdhjappeo_Cv|aqacbbnmjcfbbza~qDn | DvP~ `@dyCjgHubDt|DxxAlaCvvJnpFnTvrApoFncE~ZkpA`aDlnA~lBrdDqhElfCjkDlpAqoBloCjaB | mFyeExqE`tDgcAh|~kBhhErqBamEnmBfh@_M~yViaFltVb}E`hHrfComBaCodD`mCnxGm`C}[mmHhgIkmGmqBwRloHblDtdBck@z{ItaDroYxiBb]mQ~vKeyD`dBz\\jiKstJzzPiyEfdb@}rG`gA}~AvhFgaBwMg|FzpFk_AhxEyjJwa@_{@ozI{Ailbmigidbauf}}MwxD{ZafBs`EkmEvbC|Cg}Aua@{bU}D}@_cBzhFwcGxi@gmBneCeuEgtCazFn`QfuBt}Boe@dmHqyIt{TukDgx@{JthB_aDkkCcuD|mDkoCos@ue@dcM{u I | eaoocjtd'）；
var setRegion=new google.maps.Polygon({
路径：decodedPath，
fillColor:#0000FF“，
填充不透明度：0.2，
strokeColor:#0000FF“，
笔划不透明度：1.0，
冲程重量：2，
地图：地图
});
google.maps.event.addListenerOnce（映射'tilesloaded'，函数（）{
document.getElementById（“已加载”）.innerText=“true”；
});
}

以下是将在此网站上截图的PhantomJS代码：

/*
*捕获带有Google JavaScript地图的网页并将其导出到PNG。
*/
//原始代码：https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js
函数waitFor（testFx、onReady、timeOutMillis）{
var maxtimeOutMillis=timeOutMillis？timeOutMillis:3000，//<默认最大超时为3s
开始=新日期（）.getTime（），
条件=假，
间隔=设置间隔（函数（）{
如果（（新日期（）.getTime（）-start


及
<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>

/*
* 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();
    });        
    }
});