Question

我正在使用传单在我的角度应用程序上的地图上显示一些标记。

当我第一次加载页面时，地图显示确定，问题是当我导航到另一个页面（使用ui.router）并返回到地图页面时，图块不再渲染（所有图块都是灰色的）。 / p>

var map;
var all_coordinates;

function createMap(centrals) {
    // create the tile layer with correct attribution
    // set up the map
    map = new L.Map('map', {
        scrollWheelZoom: false
    });
    var baseMaps = {
        "Real Image": esri,
        "Roads": roads
    };
    roads.addTo(map);

    all_coordinates = SOME_COORDINATES;

    var overlayMaps = {"Name": SOME_LAYERS};
    L.control.layers(baseMaps, overlayMaps).addTo(map);
    //allCoordinates.push(L.latLng(37.016085, -7.933859));
    map.fitBounds(all_coordinates).addLayer(centrals_layers);
    return map;
}

任何人都对我做错了什么有一个想法？

编辑：

以下是地图页面的路线配置：

$stateProvider
        .state('home', {
            url: "/home",
            templateUrl: "/static/app/views/dashboard.html",
            controller: "homeController",
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {
                            serie: true,
                            files: ['/static/vendor/datatables.net/js/jquery.dataTables.min.js',
                                '/static/vendor/datatables.net-bs/css/dataTables.bootstrap.min.css',
                                '/static/vendor/datatables.net-bs/js/dataTables.bootstrap.min.js']
                        },
                        {
                            serie: true,
                            name: 'datatables',
                            files: ['/static/vendor/angular-datatables/dist/angular-datatables.min.js',]
                        },
                        {
                            serie: true,
                            name: 'datatables.buttons',
                            files: ['/static/vendor/datatables.net-buttons/js/dataTables.buttons.min.js',
                                '/static/vendor/datatables.net-buttons-bs/css/buttons.bootstrap.min.css',
                                '/static/vendor/datatables.net-buttons-bs/js/buttons.bootstrap.min.js',
                                '/static/vendor/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js']
                        }
                    ]);
                }
            }
        })

Answer 1

与Leaflet map loading half greyed tiles及相关问题（例如Leaflet Map not showing in bootstrap div，Leaflet map not displayed properly inside tabbed panel，leaflet map shows up grey等）相同的问题 - 只需在页面布局时运行map.invalidateSize()很稳定。

当路线状态改变时，传单地图不会渲染切片

1 个答案: