![](/img/trans.png)
[英]How to add Multiple coordinates for Markers from Array in Leaflet charts on ReactJS
[英]How to display markers from array in reactjs using leaflet charts
我有一个包含三个索引的数组 - ID、LAT、LNG。 我想从我的数组中获取 LAT 和 LNG 并在我的标记上设置值。 对于第一个索引,我想显示一个 PopUp。
我对 reactjs 使用 leaflet 图表。
编码:
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='© <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
如何在我的标记上设置第一个和第二个索引并在弹出窗口中设置零索引?
使用 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
};
....
在渲染 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>
))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.