在jquery mobile中顯示Google地圖時出現問題

你好我正在試圖製作一個jQuery的移動頁面，它有一張具有特定座標和幾個可摺疊項目的地圖。我從這個網站獲得了地圖的代碼（http://jsfiddle.net/Gajotres/7kGdE/），但每當我嘗試它時，屏幕都會變成空白。我也不希望地圖佔用整個頁面。我希望它與摺疊項目一起顯示在頁面上。任何幫助將不勝感激。由於在jquery mobile中顯示Google地圖時出現問題

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> 
    </head> 

    <style> 
    #content { 
     padding: 0; 
     position : absolute !important; 
     top : 40px !important; 
     right : 0; 
     bottom : 40px !important; 
     left : 0 !important;  
    } 
    </style> 

    <body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 
      <h3>First Page</h3> 
     </div> 

     <div data-role="content" id="content"> 

     <div id="map_canvas" style="height:100%"></div> 
      <div data-role="collapsibleset"> 
       <div data-role="collapsible"> 
        <h3>Click me - I'm collapsible!</h3> 
        <p>I'm the expanded content.</p> 
       </div> 

       <div data-role="collapsible"> 
       <h3>Click me - I'm collapsible!</h3> 
       <p>I'm the expanded content.</p> 
       </div> 

       <div data-role="collapsible"> 
       <h3>Click me - I'm collapsible!</h3> 
       <p>I'm the expanded content.</p> 
       </div> 

       <div data-role="collapsible"> 
       <h3>Click me - I'm collapsible!</h3> 
       <p>I'm the expanded content.</p> 
       </div> 
      </div> 
    </div> 

    <div data-theme="a" data-role="footer" data-position="fixed"> 
     <h3>First Page</h3> 
    </div> 
    </div> 
</body> 
<script> 
    $(document).on('pageinit', '#index',function(e,data){  
     var minZoomLevel = 10; 
     var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: minZoomLevel, 
     center: new google.maps.LatLng(38.50, -90.50), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    }); 
</script> 
</html>

來源

2014-11-06 speedracer2003

你不加載谷歌地圖JS。 – Omar 2014-11-06 17:16:42

@Omar麪糰！我不能相信我錯過了這一點。我想我只是盯着我的代碼太久了LOL謝謝你指出了。我添加了谷歌地圖js，但我注意到，當我把一個特定的位置的座標，小紅色標記不顯示。有什麼辦法可以解決這個問題嗎？ – speedracer2003 2014-11-06 17:35:49

你的代碼只加載地圖;爲了添加標記，爲此具有不同的功能。 – Omar 2014-11-06 17:38:43

您提供應該沒有問題的工作，但是，你必須改變的map_canvasheight並設置一個靜態值的代碼。 100%將不會佔據整個高度，因爲父div content高度也未定義。內容div根據內容進行擴展。

#map_canvas { 
    height: 200px; 
    width: 100%; 
}

另要注意，你應該使用pagecreate，而不是過時的事件pageginit。

Demo

來源

2014-11-06 17:34:42 Omar

@謝謝你的幫助=） – speedracer2003 2014-11-06 17:53:11

@ speedracer2003不客氣。要添加標記，請檢查此小提琴http://jsfiddle.net/Palestinian/Rnh4L/ – Omar 2014-11-06 18:03:20

在jquery mobile中顯示Google地圖時出現問題

回答

相關問題