按下JQuery面板后，Google地图消失

Question

我在JQuery Mobile上使用Google Maps，但是当我单击菜单（面板）使其滑动打开时，我遇到了地图消失的问题。

这是我的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');
});
}

Answer 1

您的页面结构应如下所示。

  <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; }

然后将地图初始化为地图画布ID。

var map = new google.maps.Map(document.getElementById("#map-canva"), mapOptions);