0

Googleマップ（API v3）を組み込んだjQueryMobileページを作成しています。これまでのところ、マップの表示と多くの機能の実装に成功しています。私の問題は、グーグルマップのズーム機能が正しくレンダリングされないことです（それは壊れてピクセル状に見えます）。

ページの下部にあるコードは、jQueryMobileでのGoogleマップの基本的な実装を示しています。Firefoxの最新バージョンでテストすると、ズームの問題が発生するはずです。ズーム機能の下にある3つのライブラリのいずれかにコメントすると、正しくレンダリングされますが、jQueryモバイル機能が失われることに注意してください。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

私が行った調査によると、これらの例で実装されたライブラリで問題が解決する可能性がありますが、多数のメソッドを書き直す必要があります。誰かがこれを修正するためのより簡単な方法について私にアドバイスできますか？

サンプルコード：

<head>
    <style type="text/css">
        #map_canvas {
            height: 375px;
            width: 550px;
            padding:10px;
            border:1px solid gray;
            margin:10px;
        }
    </style>
    <link rel="stylesheet" href="../_assets/css/jqm-docs.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"
    type="text/javascript"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>

<body onload="initialize()">
    <script type="text/javascript">
        function initialize() {
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                center: new google.maps.LatLng(37.332619, -121.88440100000003),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
        }
    </script>
    <div data-role="page">
        <div data-role="header"></div>
        <div data-role="content">
            <div id="map_canvas"></div>
        </div>
    </div>
</body>

4

1 に答える 1

0

あなたが言及したプラグイン (http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html) を使用しており、これを jQM で使用することをお勧めします。このプラグインは、jQM での一部のレンダリング エラーにも悩まされており、すべてのマップを更新することを推奨していますpageshow。

次のようなコードにつながります。

jQuery(document).bind('pageshow', function(e, data) {
    var page = jQuery(e.target);
    page.find('.gmap').gmap('refresh');
});

プラグインなしで何とかこれを行うようにしてください。

于 2012-05-15T21:37:23.960 に答える