html - 在网页上定位 bing map 控件

Question

我正在尝试将 bing map ajax 控件 (v7) 添加到网页。我可以使用 bing map 帮助中的样板添加控件 - http://msdn.microsoft.com/en-us/library/gg427624.aspx以此作为我的 map div。

<div id='mapDiv' style="position:relative; width:400px; height:400px "></div>

这是我的 map 初始化:

map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
    {
        credentials: "BING_MAPS_KEY",
        center: new Microsoft.Maps.Location(45.5, -122.5),
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        zoom: 12
    });

我看到的行为是，如果我使用 postion:static 它会占据整个页面，如果我使用 position:absolute 一切似乎都有效，但我必须手动定位其他一切(我认为)。如果我使用 position:relative，它似乎并没有考虑到所有内容(例如，控件将与它之前的 sibling 重叠，而其后来的 sibling 将与控件重叠)。 我是一名程序员，而不是 HTML 专家，所以我可能缺少有关布局属性的一些基本知识。

我已经在 IE 和 Chrome 中测试了代码。我还注意到 map 的渲染似乎使用了位置设置为绝对的 img 标签，所以也许我需要告诉它不要以某种方式这样做？但是我看了看并没有看到 map 控件上的属性会有帮助，但也许我在那里遗漏了什么？

Answer 1

您应该使用相对位置或静态位置。如果渲染看起来很奇怪，您可能缺少所需的元标记和文档类型值，这些值记录在您提供的链接中。这是使用不同浏览器时出现渲染问题的首要原因。在您的页面上设置 map 非常容易。作为附加资源，请查看交互式 SDK:http://www.bingmapsportal.com/ISDK/AjaxV7如果您按任何示例的 HTML 按钮，它将为您提供可以复制和粘贴的完整 HTML。这些应该可以在任何主要浏览器中正常工作。如果您仍然看到严重的渲染问题，则可能是您的浏览器处于兼容模式。发生这种情况时，IE 会使用 IE5 标准呈现页面，该标准不仅非常陈旧，而且 Bing map 也不支持。