Question

:) 我在这里有一个小问题，将不胜感激，因为我自己也找不到问题。我用React-Leaflet构建了一个地图，在其中我在装订框中渲染了某些点。

        <Map
            style={{ zIndex: 1 }}
            maxZoom={19}
            viewport={viewPort}
            onViewportChanged={onViewportChanged}
            ref={mapRef}
            className="markercluster-map"
          >
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />
            <ClusterGroup clusteredData={clusteredData} setZoom={setViewPort} />
          </Map>

我可以用这个函数来达到极限：

const onViewportChanged = (viewport) => {
    const b = mapRef.current.leafletElement.getBounds();
    setBounds([
      b.getSouthWest().lng,
      b.getSouthWest().lat,
      b.getNorthEast().lng,
      b.getNorthEast().lat,
    ]);
    console.log(bounds)
  };

这个功能很好，我可以将边界发送到后端，这样我就可以获取标记。但是，我还是一个孩子时创建了另一张地图，在那儿我想渲染另一组标记作为热图。

...Map component from above is Parent..

<HeatMap onViewportChanged={onViewportChanged2} ref={mapRef2} />

... some more code...

HeatMap组件中的代码：

    <Map
        style={{ zIndex: 1 }}
        maxZoom={19}
        className="markercluster-map"
        viewport={viewPort}
        onViewportChanged={onViewportChanged}
        ref={ref}
      >
        <HeatmapLayer
          fitBoundsOnLoad
          fitBoundsOnUpdate
          gradient={{
            0.1: first,
            0.2: second,
            0.4: third,
            0.6: fourth,
            0.8: fifth,
            "1.0": sixth,
          }}
          points={addressPoints}
          longitudeExtractor={(m) => m[1]}
          latitudeExtractor={(m) => m[0]}
          intensityExtractor={(m) => parseFloat(m[2])}
        />
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </Map>

现在，我从父级传递了viewPortChanged2和mapRef2作为道具。当我使用此功能渲染HeatMap组件时：

  const onViewportChanged2 = (viewport) => {
    const b = mapRef2.current.leafletElement.getBounds();
    setBounds([
      b.getSouthWest().lng,
      b.getSouthWest().lat,
      b.getNorthEast().lng,
      b.getNorthEast().lat,
    ]);
    console.log(bounds)
  };

它抛出了这个错误：

TypeError：无法读取未定义的属性'leafletElement'

我不知道是什么原因造成的。

TypeError：无法读取未定义的React JS属性“ leafletElement”

0 个答案: