在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地图时出现问题

回答

相关问题