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

编程问答 2022-05-31

问题描述

就我之前的问题而言， MapContainer,TileLayer,Marker,Popup .. React Leaflet

如何添加多个地点标记

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

解决方法

这是示例。 MapsComp：

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

  • 在 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";

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

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 无法处理如此多的标记，因此将它们渲染为圆形标记。您仍然会看到性能不是最好的，但肯定比使用标记而不是画布要好。

我不打算深入探讨这种行为的原因，因为它超出了本问题的范围，因为您首先没有提到您有如此多的分数。

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

这是渲染的结果：

leafletreact-leafletreactjsreactjsreactjsreactjs