Карта Google расширяется за край страницы, когда она встроена в jQuery Mobile "page" - PullRequest
Новая
       16

Карта Google расширяется за край страницы, когда она встроена в jQuery Mobile "page"

3 голосов
/ 06 мая 2011

У меня есть небольшое картографическое приложение, над которым я работаю, которое встраивает карту Google в страницу jQuery Mobile.Я хочу, чтобы карта занимала всю горизонтальную ширину экрана, но не более.Проблема, с которой я столкнулся, заключается в том, что карта «переполняется» за край страницы справа, возможно, на 5%.Это можно увидеть в http://www.codeemporium.com/experiments/map6.html (извините, пока не будет отображаться в Firefox), где вы заметите, что в правом нижнем углу, где на карте обычно написано «Условия использования», она была обрезана,Вот отрывок HTML-кода для главной "страницы" jQuery Mobile, который я использую, (как видно из исходного кода вышеупомянутой страницы): `

<div data-role="page" style="width:100%; height:100%;" id="main_page"> 


<div data-role="content" id="map_canvas" style="width:100%;height:80%;">  
</div> 

<div data-role="footer" style="width:100%;height:20%;"> 
  <div data-role="navbar"> 
<ul> 
  <li><a href="#welcome" data-icon="info" data-iconpos="notext"></a></li> 
  <li><a href="#settings" data-icon="gear" data-iconpos="notext"></a></li> 
  <li><a href="#tracking" data-icon="alert" data-iconpos="notext"></a></li> 
      <li><a href="#search" data-icon="search" data-iconpos="notext"></a></li> 
</ul> 
  </div><!-- /navbar --> 
</div>

`

карта вводится в map_canvas div.Используя Chrome Developer на моей машине, я вижу, что холст карты имеет ширину 1295 пикселей, что чуть больше разрешения моего экрана на 1280 пикселей за вычетом полосы прокрутки и так далее.Проблема, с которой я сталкиваюсь, заключается в том, что у меня очень мало опыта в устранении неполадок, и, как мне кажется, здесь есть проблема стилей, и она может даже не относиться непосредственно к приведенному выше фрагменту кода.В дополнение к конкретному решению этой проблемы, если кто-то мог бы предложить, как отладить подобные вещи каким-то методическим способом, это также было бы очень ценно.

1 Ответ

4 голосов
/ 06 мая 2011

Когда мы столкнулись с этой проблемой, мы должны были сделать эту функцию: 

function resizeMap () {
    $('#map_canvas').height($(window).height()-$('#map_head').height()); 
    // in your case #map_head would be .ui-navbar I believe
}
$(window).resize(function(){resizeMap(); map.setCenter(latlng)});

вы можете запустить resizeMap () в $ (document) .ready () или в инициализации вашей карты.

...