的OpenLayers 2.11和jQuery移动1.0.1工作不在一起

我一直在用的OpenLayers和jQuery Mobile的一个项目。无论何时我编写代码以在没有Jquery Mobile的情况下运行，OpenLayers都能很好地工作。当我把它们放在一起时，问题就出现了。地图从不加载。我究竟做错了什么？有什么我必须考虑到我失踪？的OpenLayers 2.11和jQuery移动1.0.1工作不在一起

这里是我写的代码：

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

如果我删除提及JavaScript文件，它的工作原理jquery.mobile。我不明白它为什么这样工作。有任何想法吗？

来源

2012-03-27 user1296685

1）您不能格式化你的网页就像一个jQuery Mobile的页面。

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

来源

2012-03-27 23:34:48 codaniel

感谢Codaniel。我按照你的建议重写和重新组织了代码，但我仍然没有看到地图。我可以看到警报功能的消息，但没有地图。如果不包括jquery-mobile库，地图会加载，但我不会看到漂亮的外观和感觉。 jquery-mobile和OpenLayers有没有兼容性问题？我还能做什么？ – user1296685 2012-03-28 16:02:53

嗯，也许这是一个冲突。我不确定。我对开放图层没有太多经验。 – codaniel 2012-03-28 16:20:25

我也有过这个问题。问题是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（）每当这个页面被呈现时调用。

来源

2012-03-30 03:27:53 jumpinjackie

感谢您的信息。我试过你写的东西，但恐怕它仍然不起作用。检查这个网页：http://www.isec.com.co/movilidad/jquery/index.html – user1296685 2012-03-30 20:51:35

绝对的救生员，这对我来说非常合适！ – Dominik 2015-02-03 00:05:05

的OpenLayers 2.11和jQuery移动1.0.1工作不在一起

回答

相关问题