更改Bing地图元素中的CSS

Change CSS in Bing Map elements?

本文关键字：CSS 元素 Bing 地图 更改      更新时间：2024-05-24

我正在将一个内部应用程序从使用谷歌地图转换为必应地图。地图需要显示在一个命名的HTML div中。无论我在哪里转换它们，它们都会渲染得很好，只有一个例外。

地图应该出现在一张很长的桌子的底部。相反，它呈现在页面的顶部，覆盖了许多行。使用F12开发工具（在IE中），我们能够调整一些CSS参数以使其正确渲染。问题是，它们在Bing Maps插入的divs中。看看微软地图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之前进行渲染，所以它只是在顶部进行渲染。但这并不能解释为什么谷歌地图会很好地渲染到元素中，并且只有在加载整个页面后才能调用onload。

其他有必应地图经验的人可能知道发生了什么？

更新：以下是地图元素的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>

我知道当div在表内开始时，它在表外关闭是很奇怪的，但这不是问题所在（而且更改它有点痛苦，因为它是一个aspx页面）。

您需要为地图指定一个位置值。在样式参数中添加位置：相对；

相关文章：