Javascript 如何使用传单图表在reactjs中显示数组中的标记

我有一个包含三个索引的数组-ID、LAT、LNG。 我想从阵列中获取LAT&LNG，并在标记上设置值。 对于第一个索引，我想显示一个弹出窗口

我用传单图表来做广告

守则：

import './App.css';
import React from 'react'
import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';


class Map extends React.Component {
  constructor() {
    super()
    this.state = {
      coords: [
[1, 41.19197, 25.33719],
[2, 41.26352, 25.1471],
[3, 41.26365, 25.24215],
[4, 41.26369, 25.33719],
[5, 41.26365, 25.43224],
[6, 41.26352, 25.52728],
[7, 41.2633, 25.62233],
[8, 41.263, 25.71737],
[9, 41.30828, 22.95892],
[10, 41.31041, 23.054],
      ],
      zoom: 7
    }
  }

  render() {


    const position = [this.state.coords];
    return (
      <LeafletMap center={[42.733883, 25.485830]} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />

        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </LeafletMap>
    );
  }
}


export default Map

import'/App.css'；
从“React”导入React
从“react传单”导入{Map as传单映射、TileLayer、Marker、Popup}；
类映射扩展了React.Component{
构造函数（）{
超级（）
此.state={
协调：[
[1, 41.19197, 25.33719],
[2, 41.26352, 25.1471],
[3, 41.26365, 25.24215],
[4, 41.26369, 25.33719],
[5, 41.26365, 25.43224],
[6, 41.26352, 25.52728],
[7, 41.2633, 25.62233],
[8, 41.263, 25.71737],
[9, 41.30828, 22.95892],
[10, 41.31041, 23.054],
],
缩放：7
}
}
render（）{
const position=[this.state.coords]；
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。
);
}
}
导出默认映射

错误为：TypeError:latlng为null

---

如何在标记上设置第一个和第二个索引，在弹出窗口上设置零索引？

使用map遍历对象数组，并使用map index捕获第一个项目。您不需要将索引存储在coords数组中：

this.state = {
      coords: [
        { lat: 41.19197, lng: 25.33719 },
        { lat: 41.26352, lng: 25.1471 },
        { lat: 41.26365, lng: 25.24215 },
        { lat: 41.26369, lng: 25.33719 },
        { lat: 41.26365, lng: 25.43224 },
        { lat: 41.26352, lng: 25.52728 },
        { lat: 41.2633, lng: 25.62233 },
        { lat: 41.263, lng: 25.71737 },
        { lat: 41.3082, lng: 22.95892 },
        { lat: 41.31041, lng: 23.054 }
      ],
      zoom: 7
    };   

 ....

在渲染函数中：

  {coords.map(({ lat, lng }, index) => (
      <Marker position={[lat, lng]} icon={customMarker} key={index}>
          <Popup>
            {index + 1} is for popup with lat: {lat} and lon {lng}
          </Popup>
      </Marker>
    ))}

{coords.map（{lat，lng}，index）=>(
{index+1}用于带有lat:{lat}和lon{lng}的弹出窗口
))}

---

使用map遍历对象数组，并使用map索引捕获第一个项目。您不需要将索引存储在coords数组中：

this.state = {
      coords: [
        { lat: 41.19197, lng: 25.33719 },
        { lat: 41.26352, lng: 25.1471 },
        { lat: 41.26365, lng: 25.24215 },
        { lat: 41.26369, lng: 25.33719 },
        { lat: 41.26365, lng: 25.43224 },
        { lat: 41.26352, lng: 25.52728 },
        { lat: 41.2633, lng: 25.62233 },
        { lat: 41.263, lng: 25.71737 },
        { lat: 41.3082, lng: 22.95892 },
        { lat: 41.31041, lng: 23.054 }
      ],
      zoom: 7
    };   

 ....

在渲染函数中：

  {coords.map(({ lat, lng }, index) => (
      <Marker position={[lat, lng]} icon={customMarker} key={index}>
          <Popup>
            {index + 1} is for popup with lat: {lat} and lon {lng}
          </Popup>
      </Marker>
    ))}

{coords.map（{lat，lng}，index）=>(
{index+1}用于带有lat:{lat}和lon{lng}的弹出窗口
))}

---

是否只显示第一个项目的弹出窗口，而其他项目仅显示标记？是的，我希望第一个项目[0]索引用于弹出消息，其他两个索引是标记的坐标。使用数组不是很有帮助。最好有一个对象数组，以便能够更有效地对其进行迭代。你介意我更改它们吗？不，没关系。你想只显示第一个项目的弹出窗口，而其他项目只显示标记吗？是的，我想第一个项目[0]索引用于弹出消息，其他两个索引是标记的坐标。使用数组不是很有帮助。最好有一个对象数组，以便能够更有效地对其进行迭代。你介意我更改它们吗？不，没关系..但我需要显示数组中的第一项1,2,3,4。。在弹出窗口中..您想让第一个显示文本，让所有其他人只显示索引吗？请解释[1,41.19197,25.33719]，[2,41.26352,25.1471]，第一个索引[0]-1,2]，直到单击标记时我想在弹出窗口中显示的结尾。示例：1表示弹出窗口，41.19197，25.33719表示标记。。2代表弹出窗口，[2,41.26352,25.1471]代表标记..顶部的原始数组有3个索引。。我希望当用户单击时，零索引像标记上的文本一样显示。要在lat和lng标记上设置的第一个和第二个索引。但是我需要显示数组中的第一项1,2,3,4。。在弹出窗口中..您想让第一个显示文本，让所有其他人只显示索引吗？请解释[1,41.19197,25.33719]，[2,41.26352,25.1471]，第一个索引[0]-1,2]，直到单击标记时我想在弹出窗口中显示的结尾。示例：1表示弹出窗口，41.19197，25.33719表示标记。。2代表弹出窗口，[2,41.26352,25.1471]代表标记..顶部的原始数组有3个索引。。我希望当用户单击时，零索引像标记上的文本一样显示。在lat和lng标记上设置的第一和第二个索引。