Openlayers 2.11 und Jquery Mobile 1.0.1 arbeiten nicht zusammen

Ich habe an einem Projekt mit OpenLayers und jquery Mobile gearbeitet. Wenn ich den Code schreibe, der ohne Jquery Mobile läuft, funktioniert OpenLayers perfekt. Das Problem kommt, wenn ich sie zusammenstelle. Die Karte wird nie geladen. Was mache ich falsch? Gibt es etwas, das ich berücksichtigen muss, dass ich vermisse? HierOpenlayers 2.11 und Jquery Mobile 1.0.1 arbeiten nicht zusammen

ist der Code, den ich schrieb:

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

Wenn ich den Verweis auf die jquery.mobile entfernen JavaScript-Datei, es funktioniert. Ich verstehe nicht, warum es so funktioniert. Irgendwelche Ideen?

Quelle

2012-03-27 user1296685

1) Sie formatieren Ihre Seite nicht wie eine jquery mobile Seite.

<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) Rufen Sie Ihre Karte von innen Pageinit. Ich würde empfehlen, Sie alle Javascript in den Kopf Ihres Dokuments zu verschieben oder noch eine externe js-Datei zu erstellen.

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

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

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

Quelle

2012-03-27 23:34:48 codaniel

Danke Codaniel. Ich habe den Code neu geschrieben und neu organisiert, wie Sie vorgeschlagen haben, aber ich sehe die Karte immer noch nicht. Ich kann die Nachricht der Alarmfunktion sehen, aber keine Karte. Wenn die jquery-mobile Bibliothek nicht enthalten ist, wird die Karte geladen, aber ich bekomme nicht das nette Aussehen und Gefühl. Gibt es Kompatibilitätsprobleme mit jQuery-mobile und OpenLayers, die mir nicht bekannt sind? Was könnte ich noch tun? – user1296685

Hmm vielleicht ist es ein Konflikt. Ich bin mir nicht wirklich sicher. Ich habe nicht viel Erfahrung mit offenen Schichten. – codaniel

Ich hatte dieses Problem auch. Das Problem ist, dass das Seitenlayout von jQuery Mobile die Größenberechnungen des OpenLayers.Map-Objekts beeinträchtigt. Was Sie haben, ist ein Betrachter, der volle Breite hat, aber keine Höhe.

Hier ist, was wir haben

Zum einen überschreiben die OpenLayers.Map.getCurrentSize() Funktion (die meisten dieser Code aus dem JQuery Mobile example angepasst wurde):

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

Zweitens strukturierten wir die JQM Seite so wie:

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

Dann legten wir in einer Funktion, die richtige Behälterhöhe prep für die Openlayers-Karte und die richtige Höhe danach, um sicherzustellen,

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

Dann endlich wird die OpenLayers.Map wie so ein:

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

und sicherzustellen, dass fixContentHeight() aufgerufen wird, wenn Sie diese Seite dargestellt wird.

Quelle

2012-03-30 03:27:53 jumpinjackie

Danke für Ihre Infos. Ich habe versucht, was du geschrieben hast, aber ich fürchte, es funktioniert immer noch nicht. Überprüfen Sie diese Seite: http://www.isec.com.co/movilidad/jquery/index.html – user1296685

Absolute Lebensretter, das hat perfekt für mich gearbeitet! – Dominik

Openlayers 2.11 und Jquery Mobile 1.0.1 arbeiten nicht zusammen

Antwort

Verwandte Themen