Openlayers + Require.js + Backbone.js + jQueryMobile - >瓷磚沒有加載

我建立了一個使用require.js，backbone.js，openlayers（移動單文件構建）和jquery mobile的項目。現在我有一些問題正確顯示地圖，因爲沒有瓷磚加載。我已經想通了如何與require.js墊片參數加載的OpenLayers API：Openlayers + Require.js + Backbone.js + jQueryMobile - >瓷磚沒有加載

shim: { 
    "backbone": { 
     "deps": [ "underscore", "jquery" ], 
     "exports": "Backbone" 
    }, 
    "openlayers": { 
     "exports": "OpenLayers" 
    } 
}

在MapView.js文件創建一個新的OpenLayers地圖：

define([ "jquery", "backbone", "openlayers" ], function($, Backbone, OpenLayers) { 
var MapView = Backbone.View.extend({ 

    // The View Constructor 
    initialize: function() { 
     console.log(3); 

     var mapOptions = { 
       div: this.el, 
       maxExtent: new OpenLayers.Bounds(-174,18.4,-63.5,71), 
       maxResolution: 0.25, 
       projection: "EPSG:102100", 
       theme: "/css/theme/default/style.css", 
       layers: [ 
        new OpenLayers.Layer.OSM("OpenStreetMap", null, { 
         transitionEffect: 'resize' 
        }) 
       ]}; 
     this.map = new OpenLayers.Map(mapOptions); 
    }, 

    render: function() { 
     console.log(4); 
    } 
}); 
return MapView; 
});

現在的地圖部分工作。我可以看到縮放按鈕，這些按鈕由地圖左上角的開放層添加，但沒有加載Tiles。 Firebug告訴我，甚至沒有要求瓷磚。目前我不知道問題可能是什麼。

對於completetion這是我的骨幹路由器：

define([ "jquery", "backbone", "../models/Map", "../views/Map" ], function($, Backbone, MapModel, MapView) { 

var Router = Backbone.Router.extend({ 
    initialize: function() { 
     console.log(2); 
     this.mapView = new MapView({ el: "#mapView" }); 
     Backbone.history.start(); 
    }, 

    // Backbone.js Routes 
    routes: { 
     "": "home", 

    }, 

    // Home method 
    home: function() { 
     console.log(0); 
     $.mobile.changePage("#map" , { reverse: false, changeHash: false }); 
    }, 
}); 

return Router; 

});

和HTML頁面

<!doctype html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="/css/jquerymobile.css" /> 
    <script src="/js/libs/require-min.js" data-main="/js/mobile"></script> 
    <style> 
     #mapView { 
     height: 500px; 
     width: 500px; 
     } 
    </style> 
</head> 

<body> 
    <div id="map" data-role="page" data-title="Map"> 
     <div data-role="header"> 
      <h1>Map</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <div id="mapView"></div> 
     </div><!-- /content --> 

     </div> 
</body> 
</html>

任何想法？

來源

2013-02-19 E. Lüders

我現在想通了。我所要做的就是添加this.map.zoomToMaxExtent();。出於某種原因，地圖不能計算出瓦片的正確可見範圍。

來源

2013-02-20 07:20:27

Openlayers + Require.js + Backbone.js + jQueryMobile - >瓷磚沒有加載

回答

相關問題