jQuery的UI地圖與jQuery Mobile的和jQuery

Question

我與jQuery的最新版本（1.7 - > 2.2.4）升級舊混合應用的新版本和jQuery Mobile的（1.1 - > 1.4 .5）。
這個應用程序包含一個頁面與地圖創建與jquery-ui-map。
現在我使用PhoneGap測試應用程序，並且包含地圖的頁面爲空，不顯示任何內容，並且控制檯沒有錯誤。
在我在互聯網上找到的所有例子中，他們都使用jquery以前的版本。

1. jquery-ui-map也可以用於最新版本的jquery嗎？
2.可能是Phonegap的問題？如果我創建了一個apk，我可以看到地圖？
3.如果我使用其他代碼創建地圖，效果會更好嗎？

下面的代碼：

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" /> 
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script> 
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"> </script> 
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> 
<script type="text/javascript" src="js/jquery.ui.map.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=KEY"></script> 
<script type="text/javascript" src="cordova.js"></script> 
<script type="text/javascript"> 
$(document).on('pagecreate',function(){ 
setTimeout(function(){ 
    $.mobile.loading('hide'); 
},500);  
}); 


$(function(){ 

$.mobile.loading('show', { 
    text: '', 
    textVisible: false, 
    theme: 'a', 
    html: "" 
}); 

$('#map-canvas').gmap({'center':'1111,0000','zoom':10}).on('init',function(){ // coordinates example 
    var Link = "http://google.com"; // Example 
    $.getJSON(link, function(data){ 
     .... 
    }); 

}); 

}); 
</script> 

太謝謝你了。

Answer 1

解決方案：
1.使用功能canvasHeight地圖的加載之前奧馬爾寫（Is there a way to preload google map with jquery mobile?）
2.更換功能綁定與一個初始化地圖。

代碼：

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" /> 
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script> 
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> 
<script type="text/javascript" src="js/jquery.ui.map.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=KEY"></script> 
<script type="text/javascript" src="cordova.js"></script> 
<script type="text/javascript"> 
$(document).on('pagecreate',function(){ 
setTimeout(function(){ 
    $.mobile.loading('hide'); 
},500);  
}); 


$(function(){ 

$.mobile.loading('show', { 
    text: '', 
    textVisible: false, 
    theme: 'a', 
    html: "" 
}); 

canvasHeight("#map-canvas"); 

$('#map-canvas').gmap({'center':'1111,0000','zoom':10}).one('init',function(){ // coordinates example 
var Link = "http://google.com"; // Example 
    $.getJSON(link, function(data){ 
    .... 
    }); 

}); 

}); 

function canvasHeight(canvas) { 
var canvasPage = $(canvas).closest("[data-role=page]").length !== 0 ? $(canvas).closest("[data-role=page]") : $(".ui-page").first(), 
    screen = $.mobile.getScreenHeight(), 
    header = $(".ui-header", canvasPage).hasClass("ui-header-fixed") ? $(".ui-header", canvasPage).outerHeight() - 1 : $(".ui-header", canvasPage).outerHeight(), 
    footer = $(".ui-footer", canvasPage).hasClass("ui-footer-fixed") ? $(".ui-footer", canvasPage).outerHeight() - 1 : $(".ui-footer", canvasPage).outerHeight(), 
    newHeight = screen - header - footer; 
$(canvas).height(newHeight); 
$(canvas).width($(window).width()); 
} 
</script> 

感謝奧馬爾:)