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

Question

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

我为 reactjs 使用传单图表。

代码：

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

错误是：TypeError: latlng is null

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

Answer 1

使用 map 遍历对象数组并使用 map index 捕获第一项。您不需要将索引存储在 coords 数组中：this.state = {&nbsp; &nbsp; &nbsp; coords: [&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.19197, lng: 25.33719 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.26352, lng: 25.1471 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.26365, lng: 25.24215 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.26369, lng: 25.33719 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.26365, lng: 25.43224 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.26352, lng: 25.52728 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.2633, lng: 25.62233 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.263, lng: 25.71737 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.3082, lng: 22.95892 },&nbsp; &nbsp; &nbsp; &nbsp; { lat: 41.31041, lng: 23.054 }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; zoom: 7&nbsp; &nbsp; };&nbsp; &nbsp;&nbsp;....在渲染函数中：&nbsp; {coords.map(({ lat, lng }, index) => (&nbsp; &nbsp; &nbsp; <Marker position={[lat, lng]} icon={customMarker} key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Popup>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {index + 1} is for popup with lat: {lat} and lon {lng}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Popup>&nbsp; &nbsp; &nbsp; </Marker>&nbsp; &nbsp; ))}