反应传单标记没有出现

如何解决反应传单标记没有出现

我创建了一个 react FC 并在“useEffect”中调用了一个 rest 服务，它应该接收一个 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>
    
}

有什么想法吗？

解决方法

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

在地图合成中：

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

,

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