的Invalidate proceduraly產生的地圖

Question

我需要廢止其頁面加載使用此代碼後，產生了一些反應，單張地圖：

maps = []; 
mapData = mapData.map(function(assetf,index){ 
    return(
     assetf.map(function(asset, index){ 
     var ind = index; 
     var indHash = "#" + ind; 
     var indExtra = ind + "ex"; 
     maps.push(indExtra); 
     return(
      <li key={ind}> 
      <div>{asset.description}</div> 
      <Map id={indExtra} style={mapStyles} center={asset.point.coordinates} zoom={7}> 
      <TileLayer 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
      /> 

      </Map> 
      </li> 
     ) 
     }) 
    ) 
    }); 

我使用此代碼嘗試：

var i; 
    for(i=0; i < maps.length; i++){ 
     maps[i].invalidateSize(true); 
    } 

但這個錯誤拋出：

Uncaught (in promise) TypeError: maps[i].invalidateSize is not a function 

Thanks，Ed。

Answer 1

您正在將地圖ID推入數組而不是Leaflet地圖。這就是爲什麼你不能在一個字符串上調用任何Leaflet API函數（在你的情況下它是invalidateSize）。

而不是給ID地圖，給它一個ref ，如：

<Map ref={indExtra} style={mapStyles} center={asset.point.coordinates} zoom={7}> 

，然後使用IDS裁判你的貼圖陣列訪問裁判和它們無效的存儲。不要忘記使用leafletElement。

var i; 
    for(i=0; i < maps.length; i++){ 
     this.refs[maps[i]].leafletElement.invalidateSize(true); 
    }