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

问题描述

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

In context to my previous question, 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 上:

Here is the example. On 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;
  };

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

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屋！