我正在将内部应用程序从使用Google地图转换为Bing地图。地图需要显示在命名的HTML div
中。无论我在哪里转换它们,它们都会很好,但有一个例外。
地图应该出现在一张很长的桌子的底部。相反,它呈现在页面的顶部,覆盖了许多行。使用F12开发人员工具(在IE中),我们能够调整一些CSS参数以使其正确呈现。问题是,它们位于Bing Maps插入的divs
内。查看Microsoft Maps API,有一些功能可以更改众多选项,但不能更改Bing生成的CSS。
相关的CSS:
<div class="MicrosoftMap MapTypeId_auto large miniscule" style="left: 0px; top: 0px;
right: 0px; bottom: 0px; overflow: hidden; position: relative; z-index: 0;
cursor: url(http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20141118162111.86/cursors/grab.cur), move;
direction: ltr !important; touch-action: none; background-color: rgb(244, 242, 238);">
如果我们删除overflow
,那么:
<div class="MicrosoftMap MapTypeId_auto large miniscule" style="left: 0px; top: 0px;
right: 0px; bottom: 0px; position: relative; z-index: 0;
cursor: url(http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20141118162111.86/cursors/grab.cur), move;
direction: ltr !important; touch-action: none; background-color: rgb(244, 242, 238);">
它在正确的位置正确渲染。分配地图的代码:
var newMap = new Microsoft.Maps.Map(
document.getElementById("mapelement"), {
credentials: "[my credentials]",
center: new Microsoft.Maps.Location(37.6970, -97.8096),
disableBirdseye: true,
mapTypeId: Microsoft.Maps.MapTypeId.road
});
调用插入地图LoadMaps()
的函数在HTML中调用:
<body onload="LoadMaps()">
我们没有使用jQuery或任何其他库。
我的主要理论是Bing Map尝试在加载mapelement
之前渲染,因此它只是渲染在顶部。但这并不能解释为什么Google Maps会很好地渲染到元素中,并且onload应该只在加载整个页面后被称为。
其他人都有使用Bing地图的经验,可能知道发生了什么?
更新 这是mapelement的HTML:
<table class="tableResult" border="0">
<tr>
<td class="mapCell"><div id="mapelement" style="width: 900px; height: 900px"></div></td>
</tr>
</table><table border="0">
<tr>
<td colspan="29"><p style="page-break-before: always"></td>
</tr>
</table>
</div>
我知道当桌面内部开始时{h} div
在桌子外面关闭是很奇怪的,但这不是问题(因为它是一个aspx页面,所以改变是一种痛苦)。
答案 0 :(得分:1)
您需要为地图指定位置值。在样式参数中添加position:relative;