我正在使用最新版本的jQuery(1.7 -> 2.2.4(和jQuery Mobile(1.1 -> 1.4.5(升级旧的混合应用程序><。此应用程序包含一个页面,其中包含使用 jquery-ui-map.
创建的地图现在我正在使用PhoneGap测试应用程序,包含地图的页面为空,不显示任何内容,控制台也没有错误.
在我在网上找到的所有例子中,它们都使用了以前版本的jquery.
1. jquery-ui-map 也可以用于最新版本的 jquery?
2. 可能是拼音的问题?如果我创建一个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>
非常感谢。
解决方案:
1. 在地图加载之前使用函数 canvasHeight 由 Omar 编写(有没有办法用 jquery 移动预加载谷歌地图?2. 将函数绑定替换为一个以初始化 map.
法典:
<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>
谢谢奥马尔·:)