html - bing地图控制不尊重div

Question

从这个页面http://www.bingmapsportal.com/isdk/ajaxv7#CreateMap1我能够创建一个地图。这是html代码：

<div class="fluid-row" style="height:300px;">
<div class="span12">
    <div id="prdmap" class="map">
    </div>
</div>

和javascript：

var map = null;
$(document).ready(function(){
    map = new Microsoft.Maps.Map(document.getElementById('prdmap'), {
        credentials: 'api_key',
        enableSearchLogo: false,
        enableClickableLogo: false
    });
    map.setView({mapTypeId : Microsoft.Maps.MapTypeId.road});
});

但是当地图加载时，它会占用整个屏幕，而不是其容器的高度和宽度。这可以取容器 div 的高度和宽度吗？

Answer 1

使用位置参数解决了我的问题。

<div id="prdmap" style="position:absolute; width:400px; height:400px;></div>

Answer 2

如果您在容器元素上指定（或继承）了宽度和高度，地图将采用它。您发布的代码没有显示prdmap. prdmap可能有关于为 id 、 classmap或<div>under class等定义的宽度和高度的 CSS 样式span12......你明白了。检查您的 html 源代码，看看为什么地图会在整个屏幕上显示。如果可能的话，也尝试定义一个明确的宽度和高度：

        <div id='prdmap' style="width:500px; height:500px">
        </div>

Answer 3

您必须在创建地图时指定高度和宽度。

  map = new Microsoft.Maps.Map(document.getElementById('prdmap'), {
    credentials: 'api_key',
    enableSearchLogo: false,
    enableClickableLogo: false,
    width:500,
    height:500
});