如何在api调用时使用react-leaflet添加多个标记? [英] How to add multiple markers using react-leaflet upon api call?

问题描述

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

如何添加多个地点标记

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

Use case is that, when cycle is travelling from one place to other place, I need to show markets along the distance that bicycler has travelled.

推荐答案

这里是示例.在 MapsComp 上:

• 声明状态变量以跟踪标记

• Declare a state variable to keep track of the markers

在comp挂载时获取标记并将其保存到变量

Fetch the markers when the comp mounts and save them to the variable

在 TileLayer 下的标记上循环，以在标记变量具有数据时可视化标记

Loop over the markers under TileLayer to visualize them when markers variable has data

 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，仅用于演示示例.

Note that this is a free api used just for demonstrating the example.

修改

我设法重现了您的代码.您不需要服务来获取json，因为您在本地.只需导入即可.

I managed to reproduce your code. you don't need a service to fetch the json because you have it locally. Just import it.

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

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

and then assign it to the state variable (or even you could avoid that and use it directly, even better)

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

在 renderMarkers 方法内部，您有一本字典，因此需要它的值，因此请使用Object.values提取坐标

Inside renderMarkers method you have a dictionary so you need its values so use Object.values to extract the coordinates

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

最后但并非最不重要的一点是，将点显示为圆形，而不显示为标记，因为您有 26000 标记.传单无法处理这么多的标记，因此将其渲染为圆形标记.您仍然会看到性能不是最好的，但是肯定比使用标记而不是画布要好.

last but not least visualize the points as Circles and not as Markers use preferCanvas flag on map container because you have 26000 markers. Leaflet cannot handle such an amount of markers so render them as circle markers. You will still see that the performance is not the best but for sure better than using markers and not canvas.

由于您没有提到您一开始就拥有如此多的要点，因此我不打算探究这种行为的原因，因为它超出了这个问题的范围.

I am not going to get into the reasons of this behavior as it is out of this questions' scope, as you have not mentioned that you have such a big amount of points in the first place.

 <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添加多个标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！