Google Maps в JQuery Mobile - PullRequest
Новая
       41

Google Maps в JQuery Mobile

12 голосов
/ 01 января 2011

При отображении карты Google в jquery mobile появляется (после прочтения форумов), что требуется код, подобный следующему: 

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map Page</h1></div>
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>

Если убрать высоту из внешнего div, div падает до высоты 0, а карта не отображается. Я надеялся получить динамический текст под картой (на основе содержимого), длины которого я не знаю, поэтому я не могу установить абсолютную высоту. У кого-нибудь есть решение этой проблемы?

Ответы [ 4 ]

15 голосов
/ 01 января 2011

Это не проблема, связанная с картами Google, дело в том, что вам нужно УСТАНОВИТЬ определенную ширину и высоту для холста карты, ваш код можно переписать так: 

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map Page</h1></div>
    <div data-role="content" style="padding:0;">
        <div id="map_canvas" style="width:300px; height:300px;"></div>
      <p id="text">Lorem ipsum legere facilisi conclusionemque pro et, sint aperiam vel at. No postea scaevola vivendum duo, et vix erant paulo. Ex fuisset perfecto vix. No sit laudem noster scriptorem, probatus assueverit ius cu.</p>
    </div>
</div>

Примерссылка

ОБНОВЛЕНИЕ: Посмотрите комментарий @Blowie, вы также можете проверить плагин jquery-ui-map .

12 голосов
/ 27 февраля 2011

Официальный пример здесь: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

HTML: 

<div data-role="page" class="page-map">
    <script src="map.js"></script>
    <link rel="stylesheet" href="map.css" />

    <div data-role="header"><h1>Map View</h1></div>
    <div data-role="content"> 
        <div id="map-canvas">

            <!-- map loads here... -->
        </div>
    </div>
</div>

CSS: 

.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }
5 голосов
/ 19 октября 2011

Ну вот как я это сделал и у меня получилось. 

<div data-role="page" id="atm" data-theme="b">
<div data-role="header" data-theme="b" data-position="inline" class="classHeader"> 
        <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Options</a>
        <h1>Location</h1>
    </div>

    <div data-role="content" id="map_canvas"></div>

    <div data-role="footer" data-position="fixed" data-theme="b" class="classFooter">
        <h1>Copyright © 2011.</h1> 
    </div>

</div>

Затем добавьте их в свой файл CSS. 

.classHeader{
height:10% !important;
}

.classFooter{
height:10% !important;
}

#map_canvas{
padding-top:10%;
padding-bottom:10%;
height:auto;
position:absolute;
width:100%;
height:88%;
max-height:1600px;
overflow:hidden;
display:block;
}

Это прекрасно работает для меня.

4 голосов
/ 16 февраля 2011

Быстрое и грязное исправление, которое работало для меня: 

$('[data-role=content]')
  .height(
    $(window).height() - 
    (5 + $('[data-role=header]').last().height() 
    + $('[data-role=footer]').last().height())
  );
// tell google to resize the map
google.maps.event.trigger(map, 'resize');
...