jQuery Mobile - 如何在外部鏈接頁面上實現谷歌地圖

我試圖使用谷歌地圖API 3與jQuery Mobile，無法讓我的外部頁面加載地圖。我檢查了Firebug，看起來地圖正在創建，但隱藏在頁面上。我可以在主頁上成功加載地圖，並且可以使用鏈接上的rel =「external」屬性成功加載外部頁面。但對於不使用rel =「external」的外部頁面，地圖不顯示。jQuery Mobile - 如何在外部鏈接頁面上實現谷歌地圖

這裏是我的代碼：

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Index</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
</head> 

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

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 
    <ul data-role='listview' id='menu'> 
     <li><a href="pages/map.html">external map page (does not work)</a></li> 
     <li><a href="pages/map.html" rel="external">map page with rel=external (works)</a></li> 
    </ul> 
    </div> 

</div> 
</body> 
</html>

map.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Map</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 

    <style type="text/css"> 

    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px } 

    </style> 

</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map_canvas"></div> 

    <script type="text/javascript"> 
     function initialize() { 
      var latlng = new google.maps.LatLng(40.716948, -74.003563); 
      //console.log(latlng); 
      var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), options); 

     } 
     $(function() { 

      initialize(); 
     }); 

    </script> 

    </div> 
</div> 
</body> 
</html>

我怎樣才能得到一個谷歌地圖在外部頁面上顯示出來，而無需使用相對= 「外部」？

來源

2011-02-02 Greg

我找到了解決方案。我需要在「pagecreate」jQuery Mobile事件中初始化Google地圖，而不是在$（document）.ready中。我也遇到了一個問題，即每次顯示頁面時都不會正確呈現整個地圖，因此我通過調用google.maps.event.trigger（map，'resize'）來刷新「pageshow」jQuery Mobile事件上的地圖。

這裏是我的代碼：

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Index</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <style type="text/css"> 
     .gmap { height: 330px; width: 100%; margin: 0px; padding: 0px } 
    </style> 
</head> 

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

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 
    <ul data-role='listview' id='menu'> 
     <li><a href="pages/map1.html">external map page 1</a></li> 
     <li><a href="pages/map2.html">external map page 2</a></li> 
    </ul> 
    </div> 

</div> 


</body> 
</html>

map1.html

<div data-role="page" class="page-map1"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map1" class="gmap"></div> 

    <script type="text/javascript"> 
     var map1, latlng1, options1; 
     function initialize() { 

      latlng1 = new google.maps.LatLng(40.716948, -74.003563); 
      options1 = { zoom: 14, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      map1 = new google.maps.Map(document.getElementById("map1"), options1); 

     } 
     $('.page-map1').live("pagecreate", function() { 

      initialize(); 

     }); 

     $('.page-map1').live('pageshow',function(){ 

      //console.log("test"); 
      google.maps.event.trigger(map1, 'resize'); 
      map1.setOptions(options1); 

     }); 

    </script> 

    </div> 
</div>

map2.html

<div data-role="page" class="page-map2"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map2" class="gmap"></div> 

    <script type="text/javascript"> 
     var map2, latlng2, options2; 
     function initialize() { 

      latlng2 = new google.maps.LatLng(40.716948, -74.003563); 
      options2 = { zoom: 14, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      map2 = new google.maps.Map(document.getElementById("map2"), options2); 

     } 
     $('.page-map2').live("pagecreate", function() { 

      initialize(); 

     }); 

     $('.page-map2').live('pageshow',function(){ 

      google.maps.event.trigger(map2, 'resize'); 
      map2.setOptions(options2); 
     }); 

    </script> 

    </div> 
</div>

來源

2011-02-03 00:37:07 Greg

jQuery Mobile - 如何在外部鏈接頁面上實現谷歌地圖

回答

相關問題