0

JQuery Mobile で Google マップを使用していますが、メニュー (パネル) をクリックしてスライドして開くとマップが消えるという問題があります。

家

ここに画像の説明を入力

これは私のJS関数です:

function loadSearch(input) {
var mapOptions = {
    center: new google.maps.LatLng(1.300000,103.800000),
    zoom: 11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    panControl:false
};
var map = new google.maps.Map(document.getElementById("content"),
    mapOptions);

switch(input)
{
    case 1:
        loadOptionsFooter();
        break;
    case 2:
        break;
    default:
        break; 
}
}

追加してみました

    google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

しかし、どういうわけかうまくいきません。誰かがこれで私を助けることができれば感謝します。

ありがとう！

編集:

function loadOptionsFooter(){
var output = ['<div data-role="navbar"><ul>'];
output.push('<li><a href="#" data-icon="gear">Filter</a></li>');
output.push('<li><a href="#" data-icon="search">Search</a></li>');
output.push('<li><a href="#" data-icon="navigation">Locate</a></li></ul></div>');

$('[data-role="footer"]').html(output.join('')).trigger('create');
}

マップは表示されるようになりましたが、ajax 呼び出しで作成されたメニューはカバーされています

ここに画像の説明を入力

メニューのコードは次のとおりです。

    <h6 class="menu-header">MAIN MENU</h6>
    <ul data-role="listview">
            <li><a href="../search/region.html">Home</a></li>
            <li><a href="#">About GeoVid</a></li>
            <li><a href="#">Contact Us</a></li>
    </ul>
    <h6 class="menu-header">USER MENU</h6>
    <ul data-role="listview">
            <li><a href="#">Log In</a></li>
    </ul>

HTML マークアップは次のようになります。

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
      <div id="page" data-role="page">
    <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="a" id="panelLeft">
    </div><!-- /panel -->

    <header data-role="header" data-position="fixed">
      <h1>test</h1>
      <a href="#panelLeft" data-icon="bars" class="ui-btn-left" data-iconpos="notext">Menu</a>
      <a href="/static/viewer/views/user/login.html" data-icon="user" class="ui-btn-right" data-iconpos="notext">Login</a>
    </header>

    <div data-role="content" id="alert">
    </div>
    <div data-role="content" id="content" class="ui-panel-wrapper">
    </div>

    <footer data-role="footer" data-position="fixed" data-tap-toggle="false">
    </footer>
  </div>
</body>
</html>

これが私がmenu.htmlを呼び出す方法です

function loadMenu(){
$.get('../../views/common/menu.html', function(data){
    var divData = $(data).filter('#defaultMenu')[0];
    $('#panelLeft').html(divData).trigger('create');
});
}
4

1 に答える 1

0

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

  <div data-role="page" id="mapPage"> 
  <div id="mapHeader" data-role="header" data-theme="a">

  </div>
  <div id="mapPageContent" data-role="content">
     <div role="main" class="ui-content" id="map-canvas">
            <!-- map loads here... -->
      </div>
   </div>
   <footer data-role="footer" data-position="fixed" data-tap-toggle="false">
   </footer>
</div>

そして、必ずCSSプロパティを設定してください

#mapPageContent, #map-canvas { width: 100%; height: 100%; padding: 0; }

次に、マップを map-canvas id に初期化します。

var map = new google.maps.Map(document.getElementById("#map-canva"), mapOptions);
于 2014-04-15T19:19:55.503 に答える