在网页上定位必应地图控件答案

【问题标题】：Positioning a bing maps control on a web page在网页上定位必应地图控件
【发布时间】：2016-12-01 04:51:32
【问题描述】：

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

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

这是我的地图初始化：

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，它似乎并没有考虑到所有事情（例如，控件将重叠其先前的兄弟姐妹，而其后的兄弟姐妹将重叠控件）。我是一名程序员，而不是 HTML 专家，所以也许我在布局属性方面缺少一些基本的东西。

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

【问题讨论】：

标签： html layout bing-maps

【解决方案1】：

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

【讨论】：