反应传单标记没有出现

Question

我创建了一个 React FC 并在“useEffect”中调用了一个休息服务，它应该接收一个 MapPoints 数组。对于这些地图点中的每一个，我都想创建一个“标记”，但它不起作用.. 如果我添加一个“静态”地图点列表，它会起作用..

地图组件：

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>

地图标记组件：

 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

我不确定你的错误在哪里，但我可以提供一个例子让你看看它是否有效

在地图中：

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

并且在标记中与您的完全相同，只是我更改了位置值，因为它与您的 api 不同，并且还添加了 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

终于找到问题了.. 我正在使用打字稿，我在 MapPoint 对象中遇到了问题。所以 x.Latitude 没有被识别..

反应传单标记没有出现

React leaflet Markers did not appear

javascript

leaflet

reactjs

react-leaflet