使程序生成的地图无效

Question

我需要使页面加载后生成的一些 react-leaflet 映射无效：

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

谢谢，Ed。

Answer 1

您将地图 ID 推入数组，而不是 Leaflet 地图。这就是为什么你不能只在一个字符串上调用任何 Leaflet API 函数（在你的情况下它是 invalidateSize）。

不是给地图 id，而是给它一个 ref 喜欢：

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

然后使用您存储在地图数组中的 refs id 访问 refs 并使它们无效。也不要忘记使用 leafletElement。

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

使程序生成的地图无效

Invalidate proceduraly generated maps

jquery

node.js

leaflet

reactjs

react-leaflet