使 Bing Map API Map 具有响应性 [英] 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 Map 具有响应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！