必应地图响应式设计

Question

在有人向我寻求答案之前，请阅读我的问题的其余部分并告诉我如何处理。

已提出一个问题 (Making the Bing Map API Map responsive)，其中包含标记为答案的内容，但答案无效。

问题？除了一些其他问题（Google 与 Bing、javascript 实现的完整列表等）之外，答案还包括一个名为 ListingsW 的变量，该变量在答案或问题的任何地方都不存在。

有人有 Bing 或 Google 的工作示例（完整）吗？

提前致谢！

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

});

Answer 1

listinsW 是页面上其他一些控件的宽度。如果您有一个侧面板，它可能包含地图旁边的项目列表，您将从屏幕宽度中减去该面板的宽度以获得地图的宽度。如果您有全屏地图，请删除此属性。所有这一切都说您可以通过设置 css 属性来简单地让地图填充可用空间；位置：相对；宽度：100%；高度：100%。您还需要将以下内容添加到您的 CSS 样式中：

html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}

通过使用 CSS，您无需担心在调整窗口大小时使用事件。