Question

我一直在与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>

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

Answer 1

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>

2）从pageinit内部调用你的地图。我建议将你所有的javascript移动到文档的头部，或者更好地创建一个外部的js文件。

$(document).delegate('#mapPage','pageinit',function(){
    mapa.addLayer(wms);

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

    alert("*/*/*");
});

Answer 2

我也遇到过这个问题。问题是jQuery Mobile的页面布局干扰了OpenLayers.Map对象的大小计算。你所拥有的是一个全宽但零高的观众。

这是我们所做的（大部分代码都是从JQuery Mobile example改编的）

首先，重写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地图准备正确的容器高度，并确保之后的正确高度

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());
    }
 }

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

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

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

Openlayers 2.11和Jquery Mobile 1.0.1不能一起使用

2 个答案: