如何在 api 调用时使用 react-leaflet 添加多个标记？

Question

关于我之前的问题，

如何添加多个地点标记

用例是，当自行车从一个地方行驶到另一个地方时，我需要显示骑车人行驶距离的市场。

Answer 1

这是例子。在 MapsComp:

声明一个状态变量来跟踪标记
在组件挂载时获取标记并将它们保存到变量中

循环遍历 TileLayer 下的标记以在标记变量有数据时可视化它们

 class MapsComp extends React.Component {
   state = { markers: [] };

   componentDidMount() {
     fetch("https://api-adresse.data.gouv.fr/search/?q=paris&type=street")
       .then((response) => response.json())
       .then((response) => {
         console.log(response);
         this.setState({ markers: response.features });
       });
   }
 ...
 here loop overs markers data to visualzie them
 {this.state.markers.length > 0 &&
         this.state.markers.map((marker) => (
           <Marker
             position={[
               marker.geometry.coordinates[1],
               marker.geometry.coordinates[0]
             ]}
             icon={icon}
           >
             <Popup>{marker.properties.label}</Popup>
           </Marker>
         ))}
}

请注意，这是免费的 api，仅用于演示示例。

编辑

我成功地重现了你的代码。您不需要获取 json 的服务，因为您在本地拥有它。只需导入即可。

import json from "../data/data.json";

然后将其赋值给状态变量（或者你甚至可以避免它并直接使用它，甚至更好）

this.state = {
   geoData: json.Sheet1,
};

在 renderMarkers 方法中你有一个字典所以你需要它的值所以使用 Object.values 来提取坐标

renderMarkers = () => {
    let latLong: Array<Array<any>> = [];
    Object.values(this.state.geoData).map((val, index) => {
      let dt1: Array<any> = [];
      dt1.push(Number(val.lat), Number(val.lng));
      latLong.push(dt1);
    });
    return latLong;
  };

最后但并非最不重要的是将点可视化为圆而不是标记在地图容器上使用 preferCanvas 标志，因为你有 26000个标记。 Leaflet 无法处理如此多的标记，因此将它们呈现为圆形标记。您仍然会看到性能不是最好的，但肯定比使用标记更好，而不是 canvas.

我不打算深入探讨这种行为的原因，因为它超出了这个问题的范围，因为你没有提到你一开始就拥有如此多的积分。

 <MapContainer
          ...
          preferCanvas
  >
...
     {this.renderMarkers().length > 0 &&
                this.renderMarkers().map((value, index) => {
                  return (
                    <CircleMarker center={[value[1], value[0]]} key={index}>
                      <Popup>{index} Sydney, Hi!!!</Popup>
                    </CircleMarker>
                  );
     })}

这是渲染的结果：

如何在 api 调用时使用 react-leaflet 添加多个标记？

How to add multiple markers using react-leaflet upon api call?

leaflet

reactjs

react-leaflet