Question

我正在使用Bing Map API v7，我正在尝试使其响应。我最初的想法是典型的

<div id='mapDiv' style="position:relative; width:100%; height:auto;"></div>

问题是当我这样做时地图完全消失了。如果我不能使用height：auto;如何使地图缩小正确的任何想法;定义高度时，地图工作正常。我很难过这个。不知道我还能展示哪些代码来尝试帮助，但如果您需要更多信息，请告诉我。

这是我使用的解决方案：

$(window).ready(updateHeight);
$(window).resize(updateHeight);

function updateHeight()
{
var div = $('#mapDiv');
var menu = $('#mapMenu');
var headerHeight = $('#header').outerHeight();
var windowHeight = $(window).height() - $('#header').outerHeight();
div.css('height', (windowHeight));
}

Answer 1

您需要使用Javascript检测窗口高度，然后在加载和调整大小时动态设置高度。这是谷歌地图，但它是相同的前提。

$(window).resize(function () {
var screenH = $(document).height();
var screenW = $(document).width();
$('#map-canvas').css({
    width: screenW - listingsW,
})
 google.maps.event.trigger(map, 'resize');

});

Answer 2

我使用map.SetView：

addEvent(window, 'resize', function() { 
  var width = $(window).width();
  map.setView({ width: width, height: 400 })
});

使Bing Map API Map响应

2 个答案: