10

jqueryモバイルページ内にGoogleマップを表示しようとしています。ページを直接ロードすると機能します。ただし、別のページからそのページに移動すると、1 つのマップ タイルしかレンダリングされません。一見すると、私の問題はhttps://forum.jquery.com/topic/google-maps-inside-jquery-mobileに似ているように見えます

ただし、「pageinit」イベント内で既に初期化を実行しており、マップ div には幅と高さが設定されています。

http://code.google.com/p/jquery-ui-map/を見たことがありますが、可能な限り（別の）サードパーティのプラグインを使用したくありません。

私のページは次のようになります。

<!DOCTYPE HTML>
<html>
<head>
    <title>PhoneGap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="cordova-1.6.1.js"></script>
    <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
    <script src="jquery-1.7.1.min.js"></script>
    <script src="global.js"></script>
    <script src="jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
    <div id="mapPage" data-role="page">
        <style type="text/css">
            html
            {
                height: 100%;
            }
            body
            {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map_canvas
            {
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true">
        </script>
        <script type="text/javascript">
            function initialize() {
                var height = $(window).height() - 50;
                var width = $(window).width();

                $("#map_canvas").height(height);
                $("#map_canvas").width(width);
                var myLatlng = new google.maps.LatLng(39.962799, -82.999802);
                var myOptions = {
                    center: myLatlng,
                    zoom: 18,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
                //alert($(map.getDiv()).width());   
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: ""
                });
                google.maps.event.trigger(map, 'resize')
            }

            $("#mapPage").live('pageinit', function () {

                initialize();
            });

        </script>
        <div data-role="header" id="menuHeader">
            <a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog">
                <img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;"
                    id="MenuIcon" src="images/menuIcon.png" /></a>
            <p>
                Loc
            </p>
        </div>
        <div data-role="content">
            <div id="map_canvas" style="margin-top: 50px;">
            </div>
        </div>
</body>
<html>

よろしくお願いします。

アップデート：

いくつか実験した後、サイズ変更イベントに次の遅延を追加しました。

setTimeout(function() {

            google.maps.event.trigger(map,'resize');
        }, 500);

これで問題は解決したようです。うまくいけば、これは他の誰かに役立ちます。

4

5 に答える 5

13

この問題が発生した場合、Googleマップを初期化するときにdomが完全にロードされていないことが原因であるとWebサイトで読みました。これをコードに追加する必要があります。

$( document ).bind( "pageshow", function( event, data ){
google.maps.event.trigger(map, 'resize');
});

わたしにはできる。表示するすべてのページでサイズを変更するのは残酷かもしれませんが...うまくいきます。

于 2012-07-03T09:58:33.887 に答える
4

<html>と<body>は 100% のサイズですが、との<div>間の階層に はありません。<body><div id="map_canvas">

それらを CSS にも追加してみてください (これにcontentは が必要ですid)。

すべての準備が整ったときにイベント<div>をトリガーして、API がマップのサイズを認識していることを確認する必要がある場合もあります。resizeタイルが 1 つしか表示されないのは、API が正しく表示されない (通常はサイズがゼロであると想定している) 典型的な症状です。

于 2012-05-07T21:32:27.910 に答える
0

私にとっての問題は、JQuery モバイルが Ajax を使用してページをロードすることでした。これがベスト プラクティスかどうかはわかりませんが、アンカー タグに次のコードを挿入して、マップ ページを強制的にロードするようにしました。

data-ajax="false"
于 2014-06-16T16:18:52.593 に答える
0

部分タイルが一度読み込まれたときにイベントをトリガーするのが正しいアプローチだと思います。以下のコード スニペットは、それを達成するのに役立ちます。

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    google.maps.event.trigger(map,'resize');
});
于 2014-04-08T12:26:21.273 に答える