React Leaflet 是一个结合了 React 和 Leaflet.js 的库,用于在 React 应用程序中创建交互式地图。Leaflet.js 是一个开源的 JavaScript 库,用于移动友好的交互式地图。MongoDB 是一个流行的 NoSQL 数据库,用于存储结构灵活的数据。
假设我们有一个 MongoDB 集合 locations
,其中包含以下字段:
{
"_id": ObjectId,
"name": String,
"latitude": Number,
"longitude": Number
}
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });
const locationSchema = new mongoose.Schema({
name: String,
latitude: Number,
longitude: Number
});
const Location = mongoose.model('Location', locationSchema);
app.get('/locations', async (req, res) => {
const locations = await Location.find();
res.json(locations);
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
function Map() {
const [locations, setLocations] = useState([]);
useEffect(() => {
fetch('/locations')
.then(response => response.json())
.then(data => setLocations(data));
}, []);
return (
<MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{locations.map(location => (
<Marker key={location._id} position={[location.latitude, location.longitude]}>
<Popup>
{location.name}
</Popup>
</Marker>
))}
</MapContainer>
);
}
export default Map;
mongoose.connect
中的连接字符串和认证信息。希望这些信息对你有所帮助!
领取专属 10元无门槛券
手把手带您无忧上云