responsive-design - 使 Bing Map API map 响应

Question

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

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

问题是当我这样做时 map 完全消失了。如果我不能使用 height:auto; ，关于如何正确缩小 map 的任何想法；当我定义高度时， map 工作正常。我对此感到很困惑。不确定我还能展示什么我的代码来尝试和帮助，但如果您需要更多，请告诉我。

这是我使用的解决方案:

$(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 检测窗口高度，然后在加载和调整大小时动态设置高度。这是针对 Google map 的，但前提相同。

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

});