0

マップが必要な jquery モバイル アプリを作成しています。

地図については、Google マップ サービスを使用する予定です。

方向の変化を説明するために、次のようなものを使用しようとしました:

<script>
$('#page-map').live('pagecreate', function(event) {
    var map = $('#map_canvas').gmap({
        ...
    });
    ...
    $(window).resize(function() {
       $('#map_canvas').width($(window).width());
       $('#map_canvas').height($(window).height());
    });
)};
</script>

問題: このコードは、デバイスが回転したときにマップ キャンバスのサイズを正しく変更しますが、jquery mobile resize() がスキップされたように見えます (たとえば、URL バーが表示されます...)。

「resize(function() {」コードに次のようなものを追加することすらありません。

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

役に立ちます。

更新: この問題は、ページをテストしている唯一のモバイル デバイス (Samsung Galaxy Mini (GT-S5570)、Android 2.3.4 (Gingerbread)) でのみ発生します。デスクトップ PC でウィンドウのサイズを変更するときは発生しません(つまり、デスクトップ ブラウザでは、resize() バインディングがなくても、ブラウザのウィンドウが拡大されたときに map_canvas が正しく塗りつぶされます。これは、map_canvas で幅/高さが 100% であるためだけです... )

4

2 に答える 2

0

上記の回答（および他の多くの回答）を試しましたが、何もうまくいきませんでした。実際、上記のコードは私にとっては機能していましたが、jQuery Mobile を使い始めるまでは. どういうわけか、jQuery Mobile をロードすると (面白いことに、CSS ではなく JS であることに気付きました)、map_canvas には高さがありません (要素の高さを確認するためのトリックは、 のように境界線を追加することですborder: 1px solid red;)。

最終的に、次のコード/cssを使用して、向きが変わったときに自動サイズ変更を解決することができました:

<div data-role="page" id="pageID">
   <div role="main" class="ui-content">
      <div id="map_canvas">
      </div>
   </div>
</div>

そしてcssで：

html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}
.ui-content {
  padding: 0;
}
.ui-content,
.ui-content #map_canvas {
  height: inherit; /* the trick */
}

だから、基本的には：height: inherit;私のために問題を解決しました。

クレジット: https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250

それが役立つことを願っています！

于 2015-04-12T13:52:45.033 に答える
0


css を使用して jquery モバイルのマップにサイズを割り当てます
。div 内に map_canvas を追加します。この場合は 100% のディメンションが必要です。

CSS

#map_content {
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;}


#map_canvas {
width: 100%;
height: 100%;
padding: 0;
text-shadow: none;}

HTML

         <div data-role="content" id="map_content" data-theme="a">
            <div id="map_content">
                <div id="map_canvas"></div>
            </div>
        </div>
于 2012-08-31T17:58:10.637 に答える