Jquery mobile Openlayers 2.11和Jquery Mobile 1.0.1无法协同工作_Jquery Mobile_Openlayers

Jquery mobile Openlayers 2.11和Jquery Mobile 1.0.1无法协同工作

jquery-mobile openlayers

Jquery mobile Openlayers 2.11和Jquery Mobile 1.0.1无法协同工作,jquery-mobile,openlayers,Jquery Mobile,Openlayers,我一直在从事OpenLayers和jquery Mobile的一个项目。每当我编写代码在没有Jquery Mobile的情况下运行时，OpenLayers都能完美地工作。当我把它们放在一起时，问题就来了。地图永远不会加载。我做错了什么？有什么我必须考虑的，我错过了以下是我编写的代码： <html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <

我一直在从事OpenLayers和jquery Mobile的一个项目。每当我编写代码在没有Jquery Mobile的情况下运行时，OpenLayers都能完美地工作。当我把它们放在一起时，问题就来了。地图永远不会加载。我做错了什么？有什么我必须考虑的，我错过了

以下是我编写的代码：

<html>
<head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>ISEC App</title>

    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" href="index.css" />


    <script src="jquery.mobile/jquery-1.6.4.min"></script>

    <!--  If I comment this line, everything works fine -->
    <script src="jquery.mobile/jquery.mobile-1.0.1.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js">      </script>
    <script type="text/javascript" src="barcodescanner.js"></script>
    <script type="text/javascript" charset="utf-8" src="index.js"></script>
    <script type="text/javascript" src="OpenLayers.js"></script>
    <script type="text/javascript" src="lib/mapa.js"></script>
</head>
 <body>


  <div style="width:100%; height:100%" id="mapas"></div>


  <script defer="defer" type="text/javascript">    


    var mapa = new OpenLayers.Map('mapas');
    var wms = new OpenLayers.Layer.OSM(
        "Isec", "http://www.isec.com.co/osm/tiles/z${z}/ln${x}/lt${y}.png",
        {numZoomLevels: 18}
    );
    mapa.addLayer(wms);

    mapa.setCenter(lonLatT(-74.1185,4.6867), 14);

    alert("*/*/*");



    function lonLatT(lon, lat){
    return new OpenLayers.LonLat(lon,lat).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
    }
  </script>

</body>

<html>


ISEC应用程序
var mapa=newopenlayers.Map（'mapas'）；
var wms=new OpenLayers.Layer.OSM(
“Isec”http://www.isec.com.co/osm/tiles/z${z}/ln${x}/lt${y}.png“，
{numZoomLevels:18}
);
mapa.addLayer（wms）；
地图设置中心（lonLatT（-74.1185,4.6867），14）；
警报（“*/*/*”）；
函数lonLatT（lon，lat）{
返回newOpenLayers.LonLat（lon，lat.transform）（newOpenLayers.Projection（“EPSG:4326”）、newOpenLayers.Projection（“EPSG:900913”）；
}

如果我删除对jquery.mobile javascript文件的引用，它就会工作。我不明白为什么会这样。有什么想法吗？

1）您的页面格式不像jquery手机页面

<div data-role="page" id="mapPage">
    <div data-role="header">
        <h1>Map</h1>
    </div>
    <div data-role="content">
        <div id="mapa"></div>
    </div>
</div>

我也有这个问题。问题是jQueryMobile的页面布局干扰了OpenLayers.Map对象的大小计算。您拥有的是一个全宽但高度为零的查看器

下面是我们所做的（此代码大部分改编自）

首先，重写OpenLayers.Map.getCurrentSize（）函数：

OpenLayers.Map.prototype.getCurrentSize = function() {
    var mapDiv = $(this.div);
    return new OpenLayers.Size(mapDiv.width(), mapDiv.height());
};

其次，我们构建了JQM页面，如下所示：

<div data-role="page">
     <div data-role="header">
         <h3>Map Viewer</h3>
     </div>
     <div data-role="content" id="viewerContainer">
         <div id="viewer">
         </div>
     </div>
     <div data-role="footer">
         <h3>My footer</h3>
     </div>
</div>

最后，OpenLayers.Map的设置如下：

ensureNonZeroHeight("viewerContainer");
var map = new OpenLayers.Map("viewer", { /* other options */ });
/* Other map initialization code */
fixContentHeight(map);

并确保在显示此页面时调用fixContentHeight（）。

谢谢Codaniel。我按照你的建议重写并重新组织了代码，但我仍然看不到地图。我可以看到警报功能的消息，但没有地图。如果不包括jquery移动库，则会加载地图，但我无法获得良好的外观和感觉。我不知道jquery mobile和OpenLayers是否存在任何兼容性问题？我还能做什么？嗯，也许这是一场冲突。我不是很确定。我没有太多的经验与开放层。谢谢你的信息。我试过你写的东西，但恐怕还是不起作用。查看此页：

function fixContentHeight(olMap) {
    var footer = $("div[data-role='footer']:visible"),
        content = $("div[data-role='content']:visible:visible"),
        viewHeight = $(window).height(),
        contentHeight = viewHeight - footer.outerHeight();

    if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) {
        contentHeight -= (content.outerHeight() - content.height() + 1);
        content.height(contentHeight);
    }
    content.width($(window).width());
    olMap.updateSize();
}

function ensureNonZeroHeight(containerid) {
    var footer = $("div[id='" + containerid + "'] > div[data-role='footer']"),
        header = $("div[id='" + containerid + "'] > div[data-role='header']"),
        content = $("div[id='" + containerid + "'] > div[data-role='content']"),
        viewHeight = $(window).height(),
        contentHeight = viewHeight - footer.outerHeight() - header.outerHeight();

    if ((content.outerHeight() + footer.outerHeight() + header.outerHeight()) !== viewHeight) {
        contentHeight -= (content.outerHeight() - content.height() + 1);
        content.height(contentHeight);
        content.width($(window).width());
    }
 }

ensureNonZeroHeight("viewerContainer");
var map = new OpenLayers.Map("viewer", { /* other options */ });
/* Other map initialization code */
fixContentHeight(map);