Jquery mobile Openlayers+；Require.js+；Backbone.js+；jQueryMobile->；未加载的瓷砖_Jquery Mobile_Backbone.js_Requirejs_Openlayers_Tiles

Jquery mobile Openlayers+；Require.js+；Backbone.js+；jQueryMobile->；未加载的瓷砖

jquery-mobile backbone.js requirejs openlayers

Jquery mobile Openlayers+；Require.js+；Backbone.js+；jQueryMobile->；未加载的瓷砖,jquery-mobile,backbone.js,requirejs,openlayers,tiles,Jquery Mobile,Backbone.js,Requirejs,Openlayers,Tiles,我已经建立了一个使用require.js、backbone.js、openlayers（移动单文件构建）和jquery mobile的项目。现在我在正确显示地图时遇到了一些问题，因为没有加载平铺。我已经了解了如何使用require.js shim参数加载openlayers api： shim: { "backbone": { "deps": [ "underscore", "jquery" ], "exports": "Backbone" },

我已经建立了一个使用require.js、backbone.js、openlayers（移动单文件构建）和jquery mobile的项目。现在我在正确显示地图时遇到了一些问题，因为没有加载平铺。我已经了解了如何使用require.js shim参数加载openlayers api：

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

现在地图部分起作用了。我可以看到openlayers在地图左上角添加的缩放按钮，但没有加载任何平铺。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>


#地图视图{
高度：500px；
宽度：500px；
}
地图

有什么想法吗？

我现在想出来了。我所要做的就是添加

this.map.zoomToMaxExtent（）。由于某种原因，如果没有这些信息，贴图无法计算瓷砖的正确可见范围