javascript - 如何在 ReactJS 的 Leaflet 图表中为数组中的标记添加多个坐标

Question

我有一个带有标记 ID、纬度和经度坐标的数组。

我想在图表上显示带有数组的第一个和第二个索引的标记，并且我想将零索引显示为 PopUp。

我的代码:

import React from 'react';
import L from 'leaflet';

var markersList = [
[1, 41.19197, 25.33719],
[2, 41.26352, 25.1471],
[3, 41.26365, 25.24215],
[4, 41.26369, 25.33719],
];

class Map extends React.Component {
  componentDidMount() {
    // create map
    this.map = L.map('map', {
      center: [42.733883, 25.485830],
      zoom: 7,
      layers: [
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }),
      ]
    });
  }

  render() {
    return (
       <div id="map"></div>
    );
  }
}

export default Map

我可以获取带有代码的示例如何显示所有标记吗？

Answer 1

不知道 LeafletMap 的实现，所以我可能是错的，但我认为映射您拥有的所有标记应该可以正常工作:

{markersList.map(markerPosition => (
    <Marker position={markerPosition}>
        <Popup>
            Асеновград
        </Popup>
    </Marker>
))}