Javascript Bing地图图像生成器未按预期工作

Javascript Bing地图图像生成器未按预期工作,javascript,jquery,maps,bing-maps,bing-api,Javascript,Jquery,Maps,Bing Maps,Bing Api,我需要在我的web应用程序中使用带有图像下载功能的Bing地图。 我需要在bing地图上绘制,用户可以下载相同的地图。 若我在地图上画东西的话效果很好,但我在尝试缩放区域时并没有得到预期的结果。 在bing地图上缩放和绘制后,下载的图像不会显示街道。它只显示绘制的部分,就是这样 以下是我的期望和输出: 期望值: 输出: 下面是我参考过的完整示例链接 下面是我试图生成图像的示例代码: var map, imageGenerator; function getMapForReport(

我需要在我的web应用程序中使用带有图像下载功能的Bing地图。 我需要在bing地图上绘制,用户可以下载相同的地图。 若我在地图上画东西的话效果很好,但我在尝试缩放区域时并没有得到预期的结果。 在bing地图上缩放和绘制后,下载的图像不会显示街道。它只显示绘制的部分,就是这样

以下是我的期望和输出:

期望值:

输出:

下面是我参考过的完整示例链接

下面是我试图生成图像的示例代码:

var map, imageGenerator;

function getMapForReport() {

    map = new Microsoft.Maps.Map(document.getElementById('myReportMap'), {
        credentials: '@System.Configuration.ConfigurationManager.AppSettings["BingMapCredentials"].ToString()',
        center: new Microsoft.Maps.Location(38.881397, -94.819130),
        zoom: 4,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        showMapTypeSelector: false,
        showLocateMeButton: false,
        showZoomButtons: false,
        showCopyright: false,
        showScalebar: false,
        disableScrollWheelZoom: true,
        disableZooming: true,
        enableCORS: true
    });

    document.getElementById('zoomIn').onclick = function () {

        var z = map.getZoom() + 1;
        map.setView({ zoom: z });
        zoomLevel = z;
    }

    document.getElementById('zoomOut').onclick = function () {
        var z = map.getZoom() - 1;
        map.setView({ zoom: z });
        zoomLevel = z;
    }

    Microsoft.Maps.registerModule('MapImageGeneratorModule', '/Scripts/MapImageGeneratorModule.js');
}

function generateImage(){

       Microsoft.Maps.loadModule('MapImageGeneratorModule', function () {
            imageGenerator = new MapImageGenerator(map);
       });

            imageGenerator.getImage(function (mapImg) {

                setTimeout(function () {

                    var img = mapImg.src;

                    $.post('@Url.Action("HailSwathPayment", "Payment")', { stripeToken: "", stripeEmail: "", reportId: reportId, amount: amount, mapImg: img }, function (data) {

                        var url = '@Url.Action("Index", "PurchaseList")';

                        window.location.href = url;

                    });

                }, 0);

                }, function (e) {
                      alert(e);
            });
}
我正在调用按钮单击事件上的generateImage函数,并将下载的图像(base64)保存到DB

var img=mapImg.src未获取预期输出,我已通过将base64转换为image进行检查。 我已经尝试了所有的方法,并对这个问题进行了研究,但没有成功


任何帮助都将不胜感激,谢谢

一个可能的问题是,您正在加载地图图像生成模块并在回调中创建该类的实例,但使用该类实例的所有代码都在回调之外。尝试将
imageGenerator.getImage(
移动到回调函数中,看看是否有帮助

更新:使generateImage函数如下所示:

function generateImage(){

       Microsoft.Maps.loadModule('MapImageGeneratorModule', function () {
            imageGenerator = new MapImageGenerator(map);

imageGenerator.getImage(function (mapImg) {

                setTimeout(function () {

                    var img = mapImg.src;

                    $.post('@Url.Action("HailSwathPayment", "Payment")', { stripeToken: "", stripeEmail: "", reportId: reportId, amount: amount, mapImg: img }, function (data) {

                        var url = '@Url.Action("Index", "PurchaseList")';

                        window.location.href = url;

                    });

                }, 0);

                }, function (e) {
                      alert(e);
            });
       });
}

谢谢你的回答!我有点搞不懂你的意思:(你能用一些示例代码解释一下吗?)??