Vb.net 使用html2canvas导出bing地图图像。导出期间仅显示管脚,底图不显示';t载荷
我有一个.aspx页面,可以找到属性的位置并在此位置放置pin。我很好地加载了地图,但是当使用html2canvas时,我的基础地图不会加载。我对bing地图和这个功能还不熟悉,不知道下一步该怎么办。我不知道是否应该加载层或平铺源,但以下是我的代码:Vb.net 使用html2canvas导出bing地图图像。导出期间仅显示管脚,底图不显示';t载荷,vb.net,bing-maps,html2canvas,Vb.net,Bing Maps,Html2canvas,我有一个.aspx页面,可以找到属性的位置并在此位置放置pin。我很好地加载了地图,但是当使用html2canvas时,我的基础地图不会加载。我对bing地图和这个功能还不熟悉,不知道下一步该怎么办。我不知道是否应该加载层或平铺源,但以下是我的代码: <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="comparabl
<%@ 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>
只需在地图选项中启用:enableCORS:true
,也需要在html2canvas脚本的选项中启用:enableCORS:true
,也需要在地图选项中启用:enableCORS:true
,
在html2canvas脚本中的选项中有东西告诉我html2canvas没有遍历所有内部div。您可能必须手动使其循环遍历每个内部div,并以正确的顺序在画布上渲染。有东西告诉我html2canvas没有遍历所有内部div。您可能必须对其进行欺骗手动循环每个内部div,并在画布上以正确的顺序渲染它。