的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工作不在一起

回答

相關問題