Làm cách nào để hiển thị bản đồ google toàn màn hình với jQuery Mobile?

Đoạn mã sau hiển thị đầu ra lạ. Tôi sẽ thấy một bản đồ di động toàn màn hình. Nhưng vì một số lý do nó chỉ hiển thị trên một phần của màn hình. Tôi đang sử dụng jquery.ui.map để lập bản đồ.Làm cách nào để hiển thị bản đồ google toàn màn hình với jQuery Mobile?

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script src="js/jquery.mobile-1.1.0.min.js"></script> 
    <script type="text/javascript" src="js/jquery.ui.map.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>My Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="map_canvas" name="contentMain"> 

    </div><!-- /content --> 

</div><!-- /page --> 
<script> 

    $('#map_canvas').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it 
    // see http://en.wikipedia.org/wiki/Same_origin_policy 
    $.getJSON('http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) { 
     $.each(data.markers, function(i, marker) { 
      $('#map_canvas').gmap('addMarker', { 
       'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
       'bounds': true 
      }).click(function() { 
       $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this); 
      }); 
     }); 
    }); 
}); 
</script> 
</body> 
</html>

Output:

enter image description here

Cảm ơn trước.

Nguồn

2012-05-02 Shahjalal

Giải pháp cho trang web trên thiết bị di động của tôi là đặt kiểu position:absolute; width:100%; height:100%; cho canvas canvas. Bạn có thể sử dụng các kiểu top và bottom để không gian cho các thanh công cụ.

Nguồn

2012-05-02 00:48:26

nhờ .. nó hoạt động ... – Shahjalal

'vị trí: absolute' là những gì tôi wa s mất tích, cảm ơn! – Dennis

cũng cần thay đổi kích thước bản đồ: google.maps.event.trigger (bản đồ, "thay đổi kích thước"); –

Vùng chứa và khung bản đồ cần phải rộng 100% và chiều cao.

Từ trang web di động jQuery cấu trúc của chúng là:

<div data-role="page" id="map-page" data-url="map-page"> 
    <div data-role="header" data-theme="c"> 
     <h1>Maps</h1> 
    </div> 
    <div data-role="content" id="map-canvas"> 
     <!-- map loads here... --> 
    </div> 
</div>

Và CSS:

#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

Từ đây: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

Nguồn

2013-06-01 11:49:09

header và footer là không thể tránh khỏi nếu bạn bằng cách sử dụng jQuery. Tôi đặt {data-position="fixed" data-fullscreen="true"} cho cả đầu trang và chân trang và đặt cả html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } để cả menu và bản đồ hoàn toàn hoạt động cùng nhau trên thiết bị di động.

Nguồn

2014-07-25 17:02:06

Tôi đã tìm kiếm giải pháp này trong một ngày. Điều này hoạt động cực kỳ tốt! Cám ơn rất nhiều. –

Tôi đã rối tung xung quanh với điều này một chút và quản lý để tìm ra giải pháp hoàn hảo. Nó phục vụ cho các trang có hoặc không có tiêu đề. Nó sẽ định vị bản đồ hoàn hảo trong không gian giữa phần đầu và cuối trang (hoặc trên toàn bộ trang nếu không có phần đầu), cho bất kỳ độ phân giải và chiều cao tiêu đề nào.

Giải pháp này yêu cầu cả CSS và JS nếu trang có tiêu đề và CSS chỉ khi trang không có tiêu đề.

HTML

<div data-role="page" id="mapPage"> 
    <div data-role="header"`> 
     <!-- your header HTML... --> 
    </div> 

    <div data-role="content"> 
     <div id="map-canvas"></div> 
     <p id="nogeolocation"></p> 
    </div> 
</div>

CSS

#map-canvas { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

/* eliminates scrollbars in map infowindow (optional) */ 
#mappopup { 
    line-height: 1.35; 
    overflow: hidden; 
    white-space: nowrap; 
}

var mapPageHeader = $("#mapPage .ui-header").eq(0); 
if(mapPageHeader.length > 0) { 
    var headerHeight = mapPageHeader.outerHeight(); 
    $("#map-canvas").css({ 
     'height': ($(window).height() - headerHeight + 1) + 'px', 
     'top': headerHeight - 1 
    }); 
}

Nguồn

2015-07-19 19:22:00

Làm cách nào để hiển thị bản đồ google toàn màn hình với jQuery Mobile?

Trả lời

Các vấn đề liên quan