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

Question

在我之前的问题的上下文中， MapContainer、TileLayer、Marker、Popup.. React Leaflet

如何添加多个地点标记

用例是，当自行车从一个地方到另一个地方时，我需要展示骑自行车的人走过的距离。

Answer 1

这是示例。 在MapsComp ：

• 声明一个 state 变量来跟踪标记

• 当 comp 挂载时获取标记并将它们保存到变量

• 当标记变量有数据时，循环遍历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";

然后将其分配给 state 变量（甚至您可以避免这种情况并直接使用它，甚至更好）

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;
  };

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

我不打算深入探讨这种行为的原因，因为它不属于这个问题的 scope，因为你没有提到你一开始就有这么多积分。

 <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>
                  );
     })}
  

这是渲染的结果：