我需要在我的 Web 应用程序中使用具有图像下载功能的 Bing map 。 我需要在 bing map 上绘制,用户可以下载相同的 map 。 如果我在 map 上绘制某些内容,它工作正常,但在尝试缩放区域时无法获得预期结果。 在 bing map 上缩放并绘制后,下载的图像不显示街道。它只显示绘制的部分,就是这样。
这是我的期望和输出:
预期:
输出:
这是我提供的完整示例链接,
下面是我尝试生成图像的示例代码:
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 转换为图像进行检查。 我已经尝试了一切并针对问题进行了研究,但没有运气!
如有任何帮助,我们将不胜感激,谢谢!
最佳答案
一个可能的问题是,您正在加载 map 图像生成模块并在回调中创建该类的实例,但使用该类实例的所有代码都在回调之外。尝试移动 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);
});
});
}
关于javascript - Bing map 图像生成器未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59303365/