bản đồ google trong jquery mobile

Question

Khi thấy một bản đồ google trong jquery di động nó xuất hiện (sau khi đọc các diễn đàn) rằng mã như sau là bắt buộc:

<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> 

Lấy đi những chiều cao trên div bên ngoài gây div để thả xuống độ cao 0 và bản đồ không được hiển thị. Tôi đã hy vọng sẽ nhận được một số văn bản động dưới bản đồ (dựa trên nội dung trên) mà chiều dài tôi không biết vì vậy tôi không thể thiết lập một chiều cao tuyệt đối. Có ai có một giải pháp cho vấn đề này?

Answer 1

Đây không phải là Google maps vấn đề liên quan, vấn đề là, bạn cần phải thiết lập chiều rộng và chiều cao cụ thể cho đồ vải của bạn, mã của bạn có thể được viết lại như sau:

<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> 

Example link

---

CẬP NHẬT: Có giao diện nhận xét @Blowsie, bạn cũng có thể kiểm tra plugin jquery-ui-map.

Answer 2

Nhanh chóng và bẩn sửa chữa mà làm việc cho tôi:

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

Answer 3

Có một ví dụ chính thức cho việc này ở đây: 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; } 

Answer 4

Vâng ở đây ho Tôi đã làm nó và nó làm việc cho tôi.

<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> 

Sau đó thêm chúng vào tệp CSS của bạn.

.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; 
} 

Điều này hoạt động hoàn hảo đối với tôi.