當路由狀態發生變化時，傳單地圖不會顯示瓦片

我正在使用傳單在我的角度應用上顯示地圖上的某些標記。當路由狀態發生變化時，傳單地圖不會顯示瓦片

當我第一次加載頁面時，地圖顯示ok，問題是當我導航到另一個頁面（使用ui.router）並返回到地圖頁面時tile不再顯示（所有tile都是灰色的）。

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

來源

2017-03-07 Artur Ataíde

我認爲你的路由器配置比map功能更重要。 ui-router可以根據你所做的導航類型做很多事情，比如子路由，解析等等。 – cmonkey

@cmonkey我將用te路由器編輯地圖頁面。 –

相同的問題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()當你的頁面佈局穩定時。

來源

2017-03-08 09:02:21 IvanSanchez

嗨伊凡..我已經寫了這個答案之前，但沒有運氣。可以肯定的是，我應該在初始化地圖後添加這一行嗎？ –

正如我所說的，當你的頁面佈局穩定時運行'map.invalidateSize（）'**。在你的情況下，這意味着「當UI路由器完成對DOM的更改時」。 – IvanSanchez

我使用的解決方案是使用[angular-leaflet-directive]（http://tombatossals.github.io/angular-leaflet-directive/#!/）。我需要重新構建代碼，並使用這個lib解決了問題。感謝您的輸入，當佈局穩定時，我沒有嘗試添加'map.invalidateSize（）'，但會認爲它是正確的答案。 –

當路由狀態發生變化時，傳單地圖不會顯示瓦片

回答

相關問題