全屏谷歌地圖與刷卡菜單

我想創建一個全屏谷歌地圖的Web應用程序與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>

來源

2016-04-21 cenk

Hi cenk，你有沒有得到任何解決方案？因爲我面臨同樣的問題 – Krishna

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>它說MY_KEY_HERE必須remplace一個真正的一個。

來源

2016-04-21 12:54:45

當然，我做到了。爲了保密起見，我替換了My_key_Here字符串。 – cenk

問題是，當我省略左面板和右面板div，並省略相關的$（文檔）處理代碼，一切工作正常......全屏幕地圖顯示......但我想在嵌入時嵌入一個菜單面板從左邊或右邊。 – cenk

全屏谷歌地圖與刷卡菜單

回答

相關問題