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

然后使用您存储在maps数组中的refs id来访问引用并使它们无效。别忘了使用leafletElement。

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

使程序生成的地图无效

1 个答案: