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

I have one array with three indexes - ID , LAT, LNG.I want to get LAT & LNG from my array and set the values on my marker.For the first index I want to display a PopUp.I use leaflet charts for reactjs.The code: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 MapThe error is: TypeError: latlng is nullHow can I set the first and the second indexes on my marker and zero index on popup ? 解决方案 Iterate over the array of objects using map and catch the first item using map index. You do not need to store the index inside the coords array: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 }; ....In the render function: {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> ))}Demo 这篇关于如何使用传单图表在React.js中显示数组中的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！