如何解决试图在点击 React Leaflet 地图的地方显示一个标记
这是整段代码。
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>
它不起作用。我试图通过单击附加到标记数组来向地图添加多个标记,然后映射到数组以一个一个地显示每个标记。
解决方法
如果这是您的确切代码,这是一个简单的语法错误:
{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>;
))}
Working codesandbox
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。