更改 Bing 地图元素中的 CSS？

Question

我正在将内部应用程序从使用 Google 地图转换为 Bing 地图。该地图需要出现在一个名为 HTML div 的内部。在我转换它们的所有地方，它们都呈现良好，只有一个例外。

地图应该出现在很长table的底部。相反，它呈现在页面顶部，覆盖多行。使用 F12 开发人员工具（在 IE 中），我们能够调整一些 CSS 参数以使其正确呈现。问题是，它们位于 Bing 地图插入的 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 地图会在加载 mapelement 之前尝试渲染，因此它只会在顶部渲染。但这并不能解释为什么 Google 地图可以很好地呈现到元素中，而 onload 应该只在 整个页面加载后 被调用。

还有其他人使用过 Bing 地图并且可能知道发生了什么事吗？

更新： 这是映射元素的 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>

我知道当 hte div 在 table 内部开始时它在 table 外部关闭是很奇怪的，但这不是问题所在（从那以后改变它有点痛苦这是一个 aspx 页面）。

Answer 1

您需要为地图指定位置值。在样式参数中添加 position:relative;

更改 Bing 地图元素中的 CSS？

Change CSS in Bing Map elements?

javascript

html

css

bing-maps