谷歌地圖在jQuery Mobile頁面中，縮放功能無法正常呈現

我正在構建合併Google地圖（API v3）的jQuery Mobile頁面。到目前爲止，我已經成功地顯示了地圖並實現了許多功能。我的問題是，谷歌地圖上的縮放功能無法正確渲染（它看起來像是分解了）。谷歌地圖在jQuery Mobile頁面中，縮放功能無法正常呈現

頁面底部的代碼演示了jQuery Mobile中Google地圖的基本實現。如果您在最新版本的Firefox上測試它，您應該會看到縮放問題。注意，如果您評論縮放功能下面的三個庫中的任何一個都正確呈現，但jQuery移動功能丟失。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

我所做的研究表明，在these例子實施庫可能會解決問題，但它會要求我重新寫了大量的方法。任何人都可以通過更簡單的方式來解決這個問題。

示例代碼：

<head> 
    <style type="text/css"> 
     #map_canvas { 
      height: 375px; 
      width: 550px; 
      padding:10px; 
      border:1px solid gray; 
      margin:10px; 
     } 
    </style> 
    <link rel="stylesheet" href="../_assets/css/jqm-docs.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places" 
    type="text/javascript"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
</head> 

<body onload="initialize()"> 
    <script type="text/javascript"> 
     function initialize() { 
      map = new google.maps.Map(document.getElementById('map_canvas'), { 
       center: new google.maps.LatLng(37.332619, -121.88440100000003), 
       zoom: 13, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 
     } 
    </script> 
    <div data-role="page"> 
     <div data-role="header"></div> 
     <div data-role="content"> 
      <div id="map_canvas"></div> 
     </div> 
    </div> 
</body>

來源

2012-05-15 Ben Pearce

我使用你所提到的插件（http://jquery-ui-map.googlecode.com/svn/trunk/demos /jquery-google-maps-mobile.html），並建議您將其與jQM結合使用。該插件還在jQM上出現了一些渲染失敗的問題，並建議刷新pageshow上的所有貼圖。

導致如下代碼：

jQuery(document).bind('pageshow', function(e, data) { 
    var page = jQuery(e.target); 
    page.find('.gmap').gmap('refresh'); 
});

你應該嘗試以某種方式做到這一點沒有插件。

來源

2012-05-15 21:37:23 hna

谷歌地圖在jQuery Mobile頁面中，縮放功能無法正常呈現

回答

相關問題