使 Bing Map API 地图具有响应性答案

【问题标题】：Making the Bing Map API Map responsive使 Bing Map API 地图具有响应性
【发布时间】：2013-09-19 21:53:17
【问题描述】：

我正在使用 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));
}

【问题讨论】：

标签： responsive-design bing-maps

【解决方案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');

});

【讨论】：

我在问题中添加了我的解决方案，但您的解决方案与我所做的相同，谢谢！
我使用了你的函数，但使用了 map.setView 函数来设置值。效果很好。
由于 $(document).height()--and width--是 HTML 文档的大小，如果您将地图设置为较大的数字并使用一些响应式设计，则 HTML缩小窗口时大小不会缩小。因此，似乎最好通过使用 $(window).height() 和宽度来使用窗口大小。 Here's a great fiddle example showing the document being larger than the window

【解决方案2】：

我使用map.SetView：

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

【讨论】：