带有滑动菜单的全屏谷歌地图答案

【问题标题】：full screen google map with swipe menu带有滑动菜单的全屏谷歌地图
【发布时间】：2016-04-21 20:54:45
【问题描述】：

我正在尝试创建一个全屏谷歌地图网络应用程序，其中 jquery 面板菜单显示在滑动事件中。但是地图根本不可见，就像完全被忽略或被遮蔽一样。我不知道为什么......你能告诉我我在下面的代码中哪里做错了吗？

我按照他们官方网站上提供的 jquery 演示版本获取代码，但仍然无法正常工作。

 <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>


    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
    <script src="/mobile/code/js/easing.js" type="text/javascript"></script>
    <script src="/mobile/code/js/javaModule.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>

        <style>
    #index,#GMAP {
       width:100%;
       height:100%;
       padding:0;
    }</style>

    <body>
      <div data-role="page" id="index">

                <div role="main" class="ui-content" id="GMAP">
                </div>

                <div data-role="panel" id="left-panel" data-theme="b">
                <p>Left Reveal Panel</p>
                <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right">Close</a>
                </div>

                <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="b">
                <p>Right push panel.</p>
                <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a>
                </div>

      </div>



<script>
   $(document).on('pagecreate', '#index', function () {
          $( document ).on( "swipeleft swiperight", "#index", function( e ) {
            
            if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
                if ( e.type === "swipeleft" ) {
                    $( "#right-panel" ).panel( "open" );
                } else if ( e.type === "swiperight" ) {
                    $( "#left-panel" ).panel( "open" );
                }
            }
        });
    });

     $(document).on('pageinit', '#index', function (){

         var myOptions = {
                zoom: 10,
                center: {lat:38.6075, lng:27.0694},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("GMAP"), myOptions);

         });

    </script>


    </body>
    </html>

【问题讨论】：

嗨，cenk，你有什么解决办法吗？因为我面临同样的问题

标签： jquery google-maps fullscreen swipe

【解决方案1】：

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script> 上面写着 MY_KEY_HERE 你必须替换为真实的。

【讨论】：

我当然做到了。为了保密，我替换了 My_key_Here 字符串。
问题是当我省略左面板和右面板 div 并省略相关的 $(document) 处理代码时，一切正常...显示全屏地图...但我想要从左或向右滑动时嵌入菜单面板。