2

残念ながら、次のコードでは機能しません。ヘッダーにマップの一部しか表示されません。多分誰かが助けることができますか？

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Map 2.0</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile /1.0/jquery.mobile-1.0.min.css" />
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
</head>
<body>
    <div data-role="page" id="map_page">

        <div data-role="header">
            <h1>
                Map
            </h1>
        </div>

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

    </div>
    </body>
</html>

js:

$("#map_page").live("pageinit", function() {

    var myOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
})

CSS:

 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
 #map_canvas { height: 100% }

あいさつ

@Omar: あなたの提案でコードを変更しようとしましたが、それでも機能しません。多分私は何かを見落としましたか？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Map 2.0</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="js/map.js"></script>
</head>
<body>
    <div data-role="page" id="map_page">

        <div data-role="header">
            <h1>
                Map
            </h1>
        </div>

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

    </div>
</body>
</html>

js:

$("#map_page").on("pageshow", function() {

    var myOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
})

CSS:

html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }

ドイツとモロッコからの挨拶

4

2 に答える 2

6

これが実際の例です: http://jsfiddle.net/Gajotres/7kGdE/

正しい高さはその時点でのみ計算できるため、pageshow イベント中にマップ ページを初期化する必要があります。

この関数の使用も必要です。

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

使用可能な高さ、ヘッダーおよびフッターの高さに応じて、正しいコンテンツの高さを設定するために使用されます。このARTICLEを見ると、いくつかの例を含むより多くの情報を見つけることができます。

于 2013-05-19T11:48:23.710 に答える
0

私は同様の問題を抱えていました.ヘッダーとフッターのあるページは、中央のGoogleマップが大きく、その一部がフッターの後ろにありました. これは、アプリを初めて起動するか、キャッシュを空にしてから Google マップでページをリロードした場合にのみ発生します。

また、Google マップを .ready 領域に設定したというトラップに遭遇しました。その際、ページのヘッダーやフッターの高さが 0 を返すことがあるため、Google マップを表示するスペースが大きすぎると計算され、フッターの後ろに部分的に隠れてしまいます。これは、ページの設定された最小高さによって確認できます (JQuery Mobile によって行われます)。JQuery Mobile はサイズ変更を処理し、PC またはモバイル デバイスのブラウザーのサイズ変更 (90 度回転) で、Google マップを使用してページのサイズを適切に変更します。したがって、固定の高さを設定すると、後で間違ったサイズ変更が発生する可能性があります。最初に、次のように .ready 領域に min-with を設定することをお勧めします。

// Timeout ensures header/footer height are set
setTimeout(function() {
    $('#yourPageId').css('min-height', ($(window).height() - $('#yourHeaderId').height() - $('#yourFooterId').height() +1) + 'px');
}, 200);

確かに、「pageshow」イベントにコードを配置することでタイムアウトを回避できますが (正しいヘッダーとフッターの高さで)、JQuery Mobile にはリセットする独自のコードがありますが、ページを開くたびに発生します (マルチページ プロジェクトでは fe)。高さ（正しい）。

モバイル デバイス (Chrome、Firefox、Safari) でもテスト済み

于 2019-09-15T14:28:43.017 に答える