使用客户端数据获取或getStaticProps作为传单层组件的SSG地图与Next.js？
因此，我正试图构建一个Next.js应用程序来创建一个静态站点，上面有一张传单地图，我在概念上很难将我的位置数据拉到构成地图的组件中。我正在尝试呈现一些2000+点位置，这需要使用传单画布标记库。数据本身存储在启用PostGIS扩展的Postgres数据库中。我已将Postgres数据库连接到下一个应用程序，并成功地创建了一个API路由，该路由将数据返回格式正确的GeoJSON at mysite:3000/api/getlocations
我正在通过动态呈现地图组件来构建地图页面。地图组件是使用React传单库构建的。为了组织和清晰起见，我创建了另一个组件来创建画布标记。这对于随机生成的点很好，但是现在我不知道如何将我的GeoJSON添加到画布层。
最初，我试图用getStaticProps来完成这个任务，但是我在语法和在非模块代码中导入和导出相关错误方面遇到了困难。在深入了解了一些文档之后，我阅读了有关用useEffect获取客户端数据的文章，但我不确定这是否适用于我的SSG appoach。
那么，将api数据拖到组件中的正确或最佳方法是什么？
这是我的代码页：
import Head from 'next/head'
import dynamic from 'next/dynamic';
const mapPage = () =>{
const MapWithNoSSR = dynamic(() => import("../components/Map"), {
ssr: false
});
return (
<div>
<Head>
<title>About</title>
</Head>
<h1>Map of Peng spots</h1>
<p>Map should go here!</p>
<MapWithNoSSR />
</div>
)
}
export default mapPage 这是我的地图组件
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import 'leaflet-defaulticon-compatibility';
import LeafletCanvasMarker from './Pengs';
const Map = () => {
return (
<MapContainer center={[50.1109, 8.6821]} zoom={14} scrollWheelZoom={false} style={{height: "100vh", width: "100%"}}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
/>
<Marker
position={[50.1109, 8.682]}
draggable={true}
animate={true}
>
<Popup>
Hey ! you found me
</Popup>
</Marker>
<LeafletCanvasMarker />
</MapContainer>
)
}
export default Map下面是我想要将数据放入的画布层组件：
import { useEffect } from "react";
import { useMap } from "react-leaflet";
import "leaflet-canvas-marker";
import L from "leaflet";
export default function LeafletCanvasMarker() {
const map = useMap();
useEffect(() => {
if (!map) return;
var ciLayer = L.canvasIconLayer({}).addTo(map);
ciLayer.addOnClickListener(function (e, data) {
console.log(data);
});
ciLayer.addOnHoverListener(function (e, data) {
console.log(data[0].data._leaflet_id);
});
var icon = L.icon({
iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png",
iconSize: [20, 18],
iconAnchor: [10, 9],
});
ciLayer.addLayers();
}, [map]);
return null;
}因此，我使用了几个版本的getStaticProps，但我没有成功地将GeoJSON作为画布层组件的支柱。
回答 1
Stack Overflow用户
发布于 2022-08-28 08:21:51
所以，对其他人来说，这是一个偶然的结果:我很笨，没有RTFM。接下来是一个阿片化框架，因此必须在页面组件上调用getStaticProps。将代码重构到页面组件应该是解决方案。
https://stackoverflow.com/questions/73510972
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号