Javascript 将传单MarkerCluster与PhantomJs一起使用时，所有jQuery组件都未定义

我正在用PhantomJs创建一个测试程序，用MarkerClusters创建并呈现一个传单贴图，它通过PhantomJs运行。然而，jQuery组件似乎回来时没有数据

为了测试这一点，我在一侧有一个html文件，它执行相同的功能，可以直接加载到浏览器中。它在测试html文件中似乎可以正常工作，但不能通过Phantomjs

下面是我正在使用的代码

命令行调用：

phanjs/bin/phantomjs test2.js seriesdatageo.js  600 600 geographic

Javascript文件（test2.js）

var-system=require（'system'）；
var page=require（'webpage'）。create（）；
var fs=需要（'fs'）；
page.injectJs（“jquery-1.9.1.min.js”）| |（console.log（“无法加载jquery”）&&phantom.exit（）；
page.injectJs（“传单src.js”）| |（console.log（“无法加载叶集src.js”）&&phantom.exit（））；
page.injectJs（“传单.markercluster src.js”）| |（console.log（“无法加载传单.markercluster src.js”）&&phantom.exit（）；
page.injectJs（“html2canvas.js”）| |（console.log（“无法加载html2canvas.js”）&&phantom.exit（）；
page.injectJs（“d3.min.js”）| |（console.log（“无法加载d3.min.js”）&phantom.exit（））；
page.injectJs（“html2canvas.svg.min.js”）| |（console.log（“无法加载html2canvas.svg.min.js”）&&phantom.exit（）；
page.onConsolleMessage=函数（msg）{
控制台日志（msg）；
};
phantom.injectJs（system.args[1]）||（console.log（“无法加载json文件”）&&phantom.exit（）；
变量宽度=350，高度=300；
如果（system.args.length>=4）{
宽度=parseInt（system.args[2]，10）；
高度=parseInt（system.args[3]，10）；
}
log（“加载的结果文件”）；
var evalArg={
结果:结果,，
宽度：宽度，
高度：高度
};
var svg=page.evaluate（函数（opt）{
如果（opt.result.componentType==“图表”）{
//...
}else if（opt.result.componentType==“地理”）{
var-content=“”；
var header=“”；
var body=“”；
标题+=“”；
标题+=“”；
标题+=“”；
标题+=“”；
身体+=''；
$（'head'）。追加（页眉）；
$（'body'）。追加（body）；
var-map=buildMap（）；
创建覆盖图（地图）；
if（checkload（））{
waitForIt（）；
}
函数checkLoaded（）{
return document.readyState==“完成”；
}
函数waitForIt（）{
控制台日志（“导出前”）；
exportMap（）；
控制台日志（“导出后”）；
//console.log（exportMap（））
}
函数createOverlay（容器）{
var svg=d3.select（container.getPanes（）.overlypane）.append（“svg”）.attr（“class”，“传单缩放隐藏”），
g=svg.append（“g”）；
var transform=d3.geo.transform({
地点：projectPoint
}),
path=d3.geo.path（）.projection（transform）；
var mapWidth=parseFloat（$（“#map”）.css（“width”）.replace（“px”，“px”）；
var mapHeight=parseFloat（$（“#map”）.css（“height”）.replace（“px”，“px”）；
svg.attr（“宽度”，mapWidth）
.attr（“高度”，地图高度）；
//使用传单实现D3几何变换。
功能投影点（x，y）{
var point=容器latLngToLayerPoint（新的L.LatLng（y，x））；
这个.stream.point（点x，点y）；
}
}
函数exportMap（）{
控制台日志（1）；
var myDivicons=$（“.传单标记图标”）；//未定义
console.log（$（“.传单标记图标”）[0]）；
var dx=[]；
var-dy=[]；
console.log（myDivicons.length）；//应等于6时返回0
对于（var i=0；ivar system = require('system');
var page = require('webpage').create();
var fs = require('fs');

page.injectJs("jquery-1.9.1.min.js") || ( console.log("Unable to load jQuery") && phantom.exit());
page.injectJs("leaflet-src.js") || ( console.log("Unable to load leafet-src.js") && phantom.exit());
page.injectJs("leaflet.markercluster-src.js") || (console.log("Unable to load leaflet.markercluster-src.js") && phantom.exit()); 
page.injectJs("html2canvas.js") || (console.log("Unable to load html2canvas.js") && phantom.exit()); 
page.injectJs("d3.min.js") || (console.log("Unable to load d3.min.js") && phantom.exit()); 
page.injectJs("html2canvas.svg.min.js") || (console.log("Unable to load html2canvas.svg.min.js") && phantom.exit()); 


page.onConsoleMessage = function (msg) {
    console.log(msg);
};

phantom.injectJs(system.args[1]) || (console.log("Unable to load json file") && phantom.exit());

var width = 350, height = 300;
if (system.args.length >= 4) {
    width = parseInt(system.args[2], 10);
    height = parseInt(system.args[3], 10);
}

console.log("Loaded result file");

var evalArg = {
  result: result,
  width: width,
  height: height
};

var svg = page.evaluate(function(opt) {

  if(opt.result.componentType =="chart") {
     //...
  }else if(opt.result.componentType =="geographic"){

    var content = "";
    var header = "";
    var body = "";

    header += "<link rel='stylesheet' href='leaflet.css'/> ";
    header += "<link rel='stylesheet' href='screen.css'/> ";
    header += "<link rel='stylesheet' href='MarkerCluster.css'/> ";
    header += "<link rel='stylesheet' href='MarkerCluster.Default.css'/> ";

    body += '<div id="map' + (opt.result.count==0? "": "-" + opt.result.count) + '"></div>';  
    $('head').append(header);
    $('body').append(body);

    var map = buildMap();
    createOverlay(map);

    if(checkLoaded()){
        waitForIt();
    }

    function checkLoaded() {
        return document.readyState === "complete";
    }

    function waitForIt() {
        console.log("BEFORE EXPORT");
        exportMap();
        console.log("AFTER EXPORT");
        //console.log(exportMap())
    }

    function createOverlay(container) {
        var svg = d3.select(container.getPanes().overlayPane).append("svg").attr("class", "leaflet-zoom-hide"),
            g = svg.append("g");
        var transform = d3.geo.transform({
            point: projectPoint
        }),
            path = d3.geo.path().projection(transform);

        var mapWidth = parseFloat($("#map").css("width").replace("px", ""));
        var mapHeight = parseFloat($("#map").css("height").replace("px", ""));

        svg.attr("width", mapWidth)
            .attr("height", mapHeight);

        // Use Leaflet to implement a D3 geometric transformation.
        function projectPoint(x, y) {
            var point = container.latLngToLayerPoint(new L.LatLng(y, x));
            this.stream.point(point.x, point.y);
        }

    }

    function exportMap() {
        console.log(1);

        var myDivicons = $(".leaflet-marker-icon"); //undefined
        console.log($(".leaflet-marker-icon")[0]);
        var dx = [];
        var dy = [];
        console.log(myDivicons.length); //returns 0 when it should equal 6
        for (var i = 0; i < myDivicons.length; i++) {
            var curTransform = myDivicons[i].style.transform;
            console.log(myDivicons[i]);
            var splitTransform = curTransform.split(",");
            dx.push(parseFloat(splitTransform[0].split("(")[1].replace("px", "")));
            dy.push(parseFloat(splitTransform[1].replace("px", "")));
            myDivicons[i].style.transform = "";
            myDivicons[i].style.left = dx[i] + "px";
            myDivicons[i].style.top = dy[i] + "px";
        }

        console.log(2);

        //get transform value
        image=  html2canvas($("#map")[0], {
                allowTaint: false,
                logging: true,
                useCORS: true,
                background: "#E8F0F6",
                onrendered: function (canvas) {

                    var a = document.createElement('a');
                    //a.download = name;
                    var dataUrl = canvas.toDataURL('image/png');
                    if (a.download !== undefined) {
                        a.setAttribute("id", 'download');
                        a.setAttribute("href", dataUrl);
                        a.setAttribute("download", "sample");
                    } else if (navigator.msSaveBlob) {
                        a.addEventListener("click", function (event) {
                            var blob = dataURItoBlob(dataUrl);
                            navigator.msSaveBlob(blob, "sample"+'.png');
                        }, false);
                        a.setAttribute("onmouseover", "");
                        a.setAttribute("style", "cursor: pointer; cursor: hand;");
                    }

                    document.body.appendChild(a);
                    //a.click();

                },
            });

        console.log(3);

        //console.log($('#download').attr('href'));
        console.log($('#download').innerHTML);
        return image;

    }

    function buildMap() {
         var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }),
            latlng = L.latLng(51.505, 10.09);
        var map = L.map('map', {
            center: latlng,
            zoom: 2,
            layers: [tiles],
            zoomControl: false
        });
        var markers = L.markerClusterGroup({
            spiderfyOnMaxZoom: false,
            showCoverageOnHover: false,
            zoomToBoundsOnClick: false
        });

        markers.addLayer(L.marker(L.latLng(-17.216203333, -46.870545)));
        markers.addLayer(L.marker(L.latLng(-6.18091, 106.9788)));
        markers.addLayer(L.marker(L.latLng(22.6333, 120.267)));
        markers.addLayer(L.marker(L.latLng(-6.238933794, 106.868886901)));
        markers.addLayer(L.marker(L.latLng(45.518437626, 9.10791372)));
        markers.addLayer(L.marker(L.latLng(-7.014492779, -42.125545053)));
        markers.addLayer(L.marker(L.latLng(-34.075959932, 18.819547112)));
        markers.addLayer(L.marker(L.latLng(-8.14272, 112.56221)));
        markers.addLayer(L.marker(L.latLng(45.802121064, 15.960097081)));
        markers.addLayer(L.marker(L.latLng(-7.55217, 110.8214)));
        markers.addLayer(L.marker(L.latLng(25.251247578, 55.342014803)));
        markers.addLayer(L.marker(L.latLng(14.584461153, 121.057085752)));
        markers.addLayer(L.marker(L.latLng(16.0796434, 101.8043193)));
        markers.addLayer(L.marker(L.latLng(16.0796434, 101.8043193)));
        markers.addLayer(L.marker(L.latLng(14.583363333, 120.999746667)));
        markers.addLayer(L.marker(L.latLng(16.0796434, 101.8043193)));
        markers.addLayer(L.marker(L.latLng(16.0796434, 101.8043193)));
        markers.addLayer(L.marker(L.latLng(16.0796434, 101.8043193)));
        map.addLayer(markers);

        /* Initialize the SVG layer */
        map._initPathRoot();

        return map;
    }
        return "TEST";
   }


}, evalArg);


console.log("Saved SVG to file");
console.log(svg);
phantom.exit();

add to css file. 
#map {
  height:800px;
}

 //Put this above adding the markers
 L.Icon.Default.imagePath = '/images';
 map._initPathRoot();