2013-09-19 5 views
2

Я использую Bing Map API v7, и я стараюсь сделать его отзывчивым. Моя первоначальная идея была типичнойСоздание карты карт Bing Map Map Response

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

Проблема в том, что карта полностью исчезает, когда я это делаю. Любые идеи о том, как правильно масштабировать карту, если я не могу использовать высоту: 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)); 
} 

ответ

2

Вам нужно определить высоту окна с Javascript, а затем установить высоту динамически нагрузки, а также на изменение размера. Это для карты Google, но это одно и то же предпосылка.

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

}); 
+0

я добавил мое решение вопроса, но твое такое же, как то, что я сделал так, спасибо! – Fogolicious

+0

Я использовал вашу функцию, но использовал функцию map.setView для установки значений. Он отлично работал. – srini

+0

Так как $ (document) .height() - и width - это размер документа HTML, если вы задали карту большим числом и используете некоторые отзывчивые проекты, размер HTML не уменьшается, поскольку вы сжимайте окно. Таким образом, лучше использовать размер окна, используя для этого $ (window) .height() - и width. [Вот отличный пример скрипта, показывающий, что документ больше окна] (http://jsfiddle.net/Xme7y/1/) – adpro

0

Я делаю это с map.SetView:

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