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

Question

我需要在我的 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) 保存到数据库。

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

任何帮助将不胜感激，谢谢！

Answer 1

一个可能的问题是您正在加载地图图像生成模块并在回调中创建 class 的实例，但是使用该 class 实例的所有代码都在外部的回调。尝试将 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);
            });
       });
}

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

Bing Map image generator not working as expected

javascript

maps

jquery

bing-maps

bing-api