0

Googleマップを統合して表示しようとしているphonegapアプリケーションがあります。

次のスクリプトを使用して div の可視性を切り替えています (div が表示されたときに初期化されるように、マップ スクリプトもここに追加しました)。

function showMe( elem ) {
      $$( '.toggle' ).each( function( toggle ) {
        if ( toggle.id == $(elem).id ){
          toggle.show();
          if ( toggle.id == $(contact).id ) {
                    jQuery('#contact').css('visibility', 'visible');
                    var minZoomLevel = 14;

                    var map = new google.maps.Map(document.getElementById('map_canvas'), {
                        zoom: minZoomLevel,
                        center: new google.maps.LatLng(44.444512, 26.09725),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });
                }                           
          else   jQuery('#contact').css('visibility', 'hidden');
          }
        else
          toggle.hide();

      });
    }

対応するIDを持つ4つのdivと、divの表示を切り替えるフッターがあります:

onclick="showMe('div ID');"

マップを表示しようとしている「連絡先」divには、次のものがあります

<div data-role="content" class="toggle" rel="external" id="contact" style="display:block; visibility:hidden;">
            <div class="content_holder">                    
                <div id="map_canvas" style="height:380px; width:auto; margin-left:15px; margin-right:15px;"></div>
            </div>
        </div>

ブラウザにロードすると正しく動作しますが、モバイル デバイスでは、マップがロードされる div に灰色のスポットしか表示されません。

私のconfig.xmlに次を追加しました：

<access origin="http://google.com/" />

index.html では、maps api v3 用の次のスクリプト ソースを使用しています。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false" />

何か不足していますか？

4

1 に答える 1

0

私はこの問題を知っています.Googleマップが幅と高さのない要素に描画されるか、表示するように設定されている要素に描画されると発生します: なし表示に切り替えると問題が発生します: ブロックするか、幅と高さを指定します

だからあなたのオプションは

トグルを書き直すには、各反復を非表示にして、可視状態を切り替えるものにします

それは機能しますが、レイアウトが壊れる可能性があるため、より良いオプションは、ドキュメントの準備ではなく、map-container-element を show() に切り替えた瞬間に Google マップを開始することだと思います。

いずれにせよ、Google マップを起動した時点では、ラッピング要素は表示するように設定されていない可能性があります: なし

于 2013-10-08T14:41:48.027 に答える