Openlayers 2.11 и Jquery Mobile 1.0.1 не работают вместе - PullRequest
Новая
       23

Openlayers 2.11 и Jquery Mobile 1.0.1 не работают вместе

0 голосов
/ 28 марта 2012

Я работал над проектом с 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>

Если я удаляю ссылку на файл javascript jquery.mobile, он работает.Я не понимаю, почему это так работает.Есть идеи?

Ответы [ 2 ]

1 голос
/ 30 марта 2012

У меня тоже была эта проблема.Проблема в том, что макет страницы jQuery Mobile мешает вычислению размера объекта OpenLayers.Map.То, что у вас есть, это средство просмотра, которое имеет полную ширину, но нулевую высоту.

Вот что мы сделали (большая часть этого кода была адаптирована из примера JQuery Mobile )

Во-первых, переопределите функцию 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 () вызывается всякий раз, когда эта страница представлена.

1 голос
/ 28 марта 2012

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("*/*/*");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...