Question

React 传单标记未出现

2021-01-05

1335

javascript reactjs leaflet react-leaflet

我创建了一个 React FC，并在“useEffect”中调用了一个 rest 服务，该服务应该接收 MapPoints 数组。对于每个 mappoint，我想创建一个“标记”，但它不起作用。如果我添加一个“静态”mappoints 列表，它就可以工作了。

MapComponent：

return isLoading 
      ? <h1>Data are loading...</h1>
      : 
      <MapContainer center={[47.217324, 13.097555]} zoom={5} scrollWheelZoom={false}>

         <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
        />
        
        <MapMarkers mapPoints={data}/>
        
    </MapContainer>

MapMarkersComponent：

 export const MapMarkers : React.FC<Props> = ({mapPoints}) => {


    const markers = mapPoints.map((x, index) => {
        console.log(x);
        <Marker key={index} position={{lat: x.Latitude, lng: x.Longitude}}>
            <Popup>
                <span>test</span>
            </Popup>
        </Marker>
    })
    return <Fragment>{markers}</Fragment>
    
}

有什么想法吗？

Answer 1

我不确定你的错误在哪里，但我可以为你提供一个例子来查看它是否正常工作

在 map comp 中：

const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api-adresse.data.gouv.fr/search/?q=paris&type=street")
      .then((response) => response.json())
      .then((response) => {
        // console.log(response);
        setData(response.features);
      });
  }, []);

  ... rest of the code as yours

在 markers comp 中与你的完全相同，只是我更改了位置值，因为它与你的 api 不同，并且还在你映射标记的 markers 函数中添加了一个 return

const MapMarkers = ({ mapPoints }) => {
      const markers = mapPoints.map((x, index) => {
        // console.log(x);
        const {
          geometry: { coordinates }
        } = x;
        return (
          <Marker
            key={index}
            position={{ lat: coordinates[1], lng: coordinates[0] }}
            icon={icon}
          >
            <Popup>
              <span>test</span>
            </Popup>
          </Marker>
        );
      });
    
      return markers;
    };

Demo

Answer 2

我终于找到了问题所在。我正在使用 TypeScript，但在 MapPoint 对象中遇到了问题。因此无法识别 x.Latitude。