英文:
How to add Markes to a Leaflet-map with coordinates from database in Next.js?
问题
我必须在我的数据库中显示所有地点的标记。目前，我只能显示一个标记。
我已经映射了数据库中的数组，但我不知道如何将这两者连接起来。我会非常感激任何帮助。
到目前为止，这是我的代码：
<div>
<MapContainer
center={position}
zoom={13}
scrollWheelZoom={true}
style={{ height: 500 }}
// whenCreated={setMap}
animate={true}
>
<TileLayer
attribution='© <a href="http://www.openstreetmap.org/copyright"'
url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>Hi there!</Popup>
</Marker>
</MapContainer>
{places.map((place) => (
<div key={place.id}>
{place.longCoord}, {place.latCoord}
</div>
)}
</div>
请注意，这是你的代码的翻译部分。
英文:
I have to display markers for all the places in my database. At the moment I can display just one marker.
I maped over the array from database but I do not know how to connecte these two. I would really appreciate any help.
This is my code so far:
<div>
<MapContainer
center={position}
zoom={13}
scrollWheelZoom={true}
style={{ height: 500 }}
// whenCreated={setMap}
animate={true}
>
<TileLayer
attribution='&copy; <a href="http://www.openstreetmap.org/copyright"'
url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>Hi there!</Popup>
</Marker>
</MapContainer>
{places.map((place) => (
<div key={place.id}>
{place.longCoord}, {place.latCoord}
</div>
))}
</div>
);
答案1
得分: 2
只需在MapContainer中使用.map，如下所示：
<MapContainer
center={position}
zoom={13}
scrollWheelZoom={true}
style={{ height: 500 }}
animate={true}
>
<TileLayer
attribution='© <a href="http://www.openstreetmap.org/copyright"'
url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{places.map((item, i) => (
<Marker key={i} position={{ lat: item.latCoord, lng: item.longCoord}}>
<Popup>Hi there!</Popup>
</Marker>
))}
</MapContainer>;
英文:
just use .map inside your MapContainer. like below
<MapContainer
center={position}
zoom={13}
scrollWheelZoom={true}
style={{ height: 500 }}
// whenCreated={setMap}
animate={true}
>
<TileLayer
attribution='&copy; <a href="http://www.openstreetmap.org/copyright"'
url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{places.map((item, i) => (
<Marker key={i} position={{ lat: item.latCoord, lng: item.longCoord}}>
<Popup>Hi there!</Popup>
</Marker>
))}
</MapContainer>;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论