尝试在React传单地图上单击的位置显示标记

Question

这是整段代码。

import React, { useState } from "react";
import { Marker, Popup, useMapEvents } from "react-leaflet";
const AddMarkers = () => {
const [markers, setMarkers] = useState([
{
lat: 40,
lng: -95.6268544,
},
]);
const map = useMapEvents({
click: (e) => {
setMarkers([...markers, e.latlng]);
},
});
return (
<>
{/* {markers.map((marker, i) => {
<Marker key={`marker-${i}`} position={marker}>
<Popup>
<span>
A pretty CSS3 popup. <br /> Easily customizable.
</span>
</Popup>
</Marker>;
})} */}
<Marker position={markers[0]}>
<Popup>
<span>
A pretty CSS3 popup. <br /> Easily customizable.
</span>
</Popup>
</Marker>
</>
);
};
export default AddMarkers;

当前的ACTIVE(看看注释掉了什么(代码只显示一个标记。但是当你取消注释这个部分

{/* {markers.map((marker, i) => {
<Marker key={`marker-${i}`} position={marker}>
<Popup>
<span>
A pretty CSS3 popup. <br /> Easily customizable.
</span>
</Popup>
</Marker>;
})} */}

并对这一部分进行了评述。

<Marker position={markers[0]}>
<Popup>
<span>
A pretty CSS3 popup. <br /> Easily customizable.
</span>
</Popup>
</Marker>

它不起作用。我试图通过单击标记数组来添加多个标记，然后在数组上映射以逐个显示每个标记。

Answer 1

如果这是您的确切代码，这是一个简单的语法错误：

{markers.map((marker, i) => { // <----- curly brace bad
<Marker key={`marker-${i}`} position={marker}>
<Popup>
<span>
A pretty CSS3 popup. <br /> Easily customizable.
</span>
</Popup>
</Marker>;
})}

您不会从map语句中返回任何内容。应该是

{markers.map((marker, i) => (  // <---- parantheses good
<Marker key={`marker-${i}`} position={marker}>
<Popup>
<span>
A pretty CSS3 popup. <br /> Easily customizable.
</span>
</Popup>
</Marker>;
))}

工作代码沙箱