在JQuery Mobile中顯示Google地圖

我正在嘗試構建JQuery Mobile應用程序。我希望這個應用程序包含一個Google地圖。我是基於jquery-ui-map插件實現的。他們的示例代碼可在http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map。在JQuery Mobile中顯示Google地圖

即使有這樣的例子，我仍然無法得到一個地圖出現。我覺得我正在使用最基本的代碼。有人可以告訴我我做錯了什麼嗎？我的代碼如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title></title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="/resources/scripts/jquery.ui.map.full.min.js" /> 
</head> 

<body> 
    <div id="result" data-role="page"> 
     <div data-role="header"><h1>My App</h1></div> 

     <div data-role="content"> 
      <div id="resultMap" style="height:200px; width:200px; background-color:Lime;"> 
      </div> 
     </div> 
    </div> 

    <br /><br /> 

    <script type="text/javascript"> 
     $("#result").live("pageshow", function() { 
      $("#resultMap").gmap(); 
     }); 
    </script> 
</body> 
</html>

來源

2012-02-05 JQuery Mobile

map（）而不是gmap（）？ – 2012-02-05 19:16:41

:(不幸的是沒有， – 2012-02-05 20:08:13

好的。我做這樣的：

var home = new google.maps.LatLng(x, y); 

$('#directions_map').live("pageshow", function() { 
    $('#map_canvas_1').gmap('refresh'); 
    }); 

$('#directions_map').live("pagecreate", function() { 
    $('#map_canvas_1').gmap({'center': home, 'zoom':17 }); 
    $('#map_canvas_1').gmap('addMarker', { 'position': home, 'animation' : google.maps.Animation.DROP }); 
    });

所以請嘗試：
- 創建pagecreate
的GMAP - 標記是獎金;-)

讓 - 僅在pageshow
刷新我知道這是否有訣竅。這是來自我的一個工作示例，所以它應該沒問題。我認爲在頁面展示之前設置gmap非常重要。如果你認爲JQM是一個舞臺，那麼在揭開舞臺之前，頁面展示纔是正確的。 Google Magic可能來不及。頁面創建似乎更好...

來源

2012-02-06 07:57:58 frequent

沒有運氣。有沒有限制，你不能在localhost下運行它？這太奇怪了。你有一個完整的.html文件可用嗎？我只是不能相信這不會BTW：謝謝你的幫助 – 2012-02-06 17:26:17

可能是本地主機，但我不是專家。請檢查我從哪個頁面複製上述內容：http://www.franckreich.de/5/about .html - 我將在稍後再次刪除該鏈接 – frequent 2012-02-06 18:49:53

經常感謝我下載了你的代碼並從localhost運行了它有趣的是，它的工作原理！我將繼續挖掘並試圖找出爲什麼我的代碼不工作。我很感激你的幫助，我會在這裏發表另一條評論一次（如果）我找出爲什麼我的其他代碼無法正常工作。 – 2012-02-07 16:46:56

你有沒有嘗試過這樣的：

jquery-mobile with google maps

我發現它非常容易實現。

來源

2012-02-05 20:32:47 frequent

是的，我看到了，這就是我的鏈接指向的地方，然而，我的代碼不起作用，我無法弄清楚缺少的東西，我嘗試過，沒有任何運氣重試。他們顯示的示例在我的瀏覽器中工作。 – 2012-02-05 20:54:39

我也無法從jQuery UI地圖的基本示例工作的第一次嘗試。在jquery-ui-map-3.0-rc目錄的「demos」文件夾中找到示例後，我排除了所有不必要的html和javascript以顯示非常基本的地圖。不幸的是，該網站有代碼片段，而不是一個完整的，工作但簡約的例子。

您必須檢查鏈接和腳本的引用是否正確。

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Example with Google maps and jQuery - Google maps jQuery plugin</title> 
     <link type="text/css" rel="stylesheet" href="css/style.css" > 
    </head> 
    <body> 
     <div id="map_canvas" class="map rounded"></div>  
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script> 
     <script type="text/javascript" src="../ui/jquery.ui.map.js"></script> 
     <script type="text/javascript"> 
        $('#map_canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':true, 'callback': function() { 
         var self = this; 
         self.addMarker({'position': this.get('map').getCenter() }).click(function() { 
          self.openInfoWindow({ 'content': 'Hello World!' }, this); 
         }); 
        }}); 
     </script> 
    </body> 
</html>

來源

2012-08-21 07:08:56 erin

在JQuery Mobile中顯示Google地圖

回答

相關問題