使用 html2canvas 导出 bing 地图图片。导出时只显示Pins，基本地图不加载。

Question

我有一个 .aspx 页面，可以找到属性的位置，并在此位置放置一个引脚。我加载的地图很好，但使用 html2canvas 时，我的基本地图无法加载。我是 bing 地图和此功能的新手，不知道下一步该怎么做。我不知道我是否应该加载图层或瓷砖源，但以下是我的代码。

             <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="comparableMapping.aspx.vb" Inherits="*.comparableMapping" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script charset="UTF-8" type="text/javascript" src="/Scripts/html2canvas.js"></script>
<script type="text/javascript">

    var pinInfobox = null;
    var map = null;
    var currprop;
    var defaultInfobox = new Microsoft.Maps.Infobox();
    var layer1 = new Microsoft.Maps.EntityCollection();
    var MM = Microsoft.Maps;
    var PushPinsEntity = new Microsoft.Maps.EntityCollection();

    function GetMap() {
        map = new MM.Map(document.getElementById("mapDiv"),
                          {
                              credentials: "-",
                              width: 1100,
                              height: 650,
                              enablesearchlogo: false,
                              showScalebar: false,
                              zoom: 7
                          });
        map.entities.clear();
        <%=mapLocations()%>

    }

    function displayInfoBox(e) {
        var obj = e.target;
        var pinLoc = e.target.getLocation();
        var pinId = e.target.getText() - 1;
        var pinId = e.target.pinId - 1;
        currprop = props[pinId].split("~");

        var name = currprop[0];
        if (name !== null) {
            var info = name + "<br/>";
            info += currprop[5] + "<br/>";
            info += currprop[6] + ", " + currprop[7] + " " + currprop[8] + "";
        } else {
            var info = currprop[5] + "<br/>";
            info += currprop[6] + ", " + currprop[7] + " " + currprop[8] + "";
        }
        //closeInfoWindow();
        //map.entities.remove(defaultInfobox);

        //var infoboxOptions = { title: currprop[1], width: 250, height: 140, description: info, offset: new Microsoft.Maps.Point(-1, 45) };
        var infoboxOptions = { title: currprop[1], description: info };
        defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions);
        defaultInfobox.setLocation(pinLoc);
        map.entities.push(defaultInfobox);
        //Microsoft.Maps.Events.addHandler(defaultInfobox, 'mouseleave', function () { defaultInfobox.setOptions({ visible: false }); });
    }

    function closeInfoWindow() {
        el = document.getElementById('InfoWindow');
        el.style.display = 'none';
    }

    function zoomInToProperty(e) {
        var loc = new Microsoft.Maps.Location(currprop[3], currprop[4]);
        map.setView({ center: loc, zoom: 20 });
    }

    function zoomOutOfProperty(e) {
        var viewRect = Microsoft.Maps.LocationRect.fromLocations(locs);
        if (locs.length > 1) { map.setView({ bounds: viewRect }) } else { map.setView({ center: locs[0], zoom: 6 }) };
    }

    function captureScreen() {
        html2canvas($("#mapDiv"), {
            logging: true,
            useCORS: true,
            onrendered: function (canvas) {
                //document.body.appendChild(canvas);
                var img = canvas.toDataURL("image/png");
                window.open(img);
                //var a = document.createElement('a');
                //a.download = name;
                //a.href = canvas.toDataURL('image/png');
                //document.body.appendChild(a);
                //a.click();
            },
        });

    }
 </script>
 </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div style="margin-top:10px;">
    <div id='mapDiv' class="map">
    <script type=”text/javascript”>GetMap();</script></div><br />
    <input id="load" value="save" type="button" onclick="captureScreen();"/>
    </div>
    <div style="clear:left;"></div>
</asp:Content>

Answer 1

只是需要启用。enableCORS: true 在地图选项中，也需要配置 userCORS: true, 在html2canvas脚本的选项中的