jquery-ui-map 与新版本的 jquery mobile 和 jquery

Posted 2023-05-09

【中文标题】jquery-ui-map 与新版本的 jquery mobile 和 jquery

【英文标题】：jquery-ui-map with new version of jquery mobile and jquery

【发布时间】：2017-09-05 16:24:00

【问题描述】：

我正在使用最新版本的 jQuery (1.7 -> 2.2.4) 和 jQuery Mobile (1.1 -> 1.4) 升级旧的混合应用程序。 5). 此应用包含一个页面，其中包含使用 jquery-ui-map 创建的 ma​​p。 现在我正在使用 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>

非常感谢。

【问题讨论】：

JQM 与 jQuery 3.x 不兼容

兼容哪个版本？官网上只有3.x版本，对吗？

code.jquery.com/jquery 使用 1.9 或 2.x

谢谢，现在我已经更改了jquery的版本，但问题没有解决。

预加载谷歌地图：***.com/a/21779195/1771795

【参考方案1】：

解决方案： 1.在地图加载前使用Omar编写的canvasHeight函数(Is there a way to preload google map with jquery mobile?) 2. 将函数bind替换为one来初始化地图。 代码：

<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>

谢谢奥马尔:)