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的实际宽度和高度。可能有关于ID prdmap，类map或类<div>下的span12等定义的宽度和高度的CSS样式等等...你明白了。检查你的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
});

bing map控件不尊重div

3 个答案: