使Bing Map API地图具有响应性 [英] Making the Bing Map API Map responsive

问题描述

我正在使用Bing Map API v7，并且正在尝试使其具有响应性.我最初的想法是典型的

I am using Bing Map API v7 and I am trying to make it responsive. My initial idea was the typical

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

问题是当我这样做时地图完全消失了.如果我不能使用height:auto;关于如何正确缩小地图的任何想法.当我定义高度时，地图工作正常.我为此感到非常难过.不知道我还能显示什么代码来尝试和帮助，但是如果需要更多帮助，请告诉我.

The problem is the map disappears completely when I do this. Any ideas on how to make the map scale down correctly if I can't use height:auto; The map works fine when I define a height. I am pretty stumped by this. Not sure what else I can show of my code to try and help but let me know if you need more.

这是我使用的解决方案:

This was the solution I used:

$(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));
}

推荐答案

您需要使用Javascript检测窗口高度，然后在加载以及调整大小时动态设置高度.这是针对Google地图的，但前提是相同的.

You need to detect the window height with Javascript and then set the height dynamically on load as well as on resize. This is for Google map but it's the same premise.

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

});

这篇关于使Bing Map API地图具有响应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！