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> 

感谢奥马尔:)