如何解决如何在带有传单的 next.js 应用程序中使用我的 GeoJSON 数据?
在我的 Next.js 应用程序中,我尝试使用 GeoJSON 数据文件在传单地图上使用多个位置。 当我使用地图中的一个位置时,它工作得很好,但是当我导入数据并在其上映射以在地图上显示更多点时,我运行了两个未处理的运行时错误: 类型错误:无法读取 null 的属性“lat” 和 类型错误:无法读取未定义的属性 'lat'
当我控制台记录导入的数据时,我可以看到正确的数据。
有人知道我做错了什么吗? 这是我使用的文件:
components/Map/index.js
import dynamic from 'next/dynamic'
const Map = dynamic(
() => import('./Map'),{ ssr: false }
)
export default Map;
components/Map/Map.js
import 'leaflet/dist/leaflet.css'
import { MapContainer,Marker,Popup,TileLayer } from 'react-leaflet';
import * as data from './seedlibraryData.json';
function Map() {
// console.log('data geometry coordinate 1',data.features[0].geometry.coordinates[0])
// console.log('data geometry coordinate 2',data.features[0].geometry.coordinates[1])
return(
<div>
<MapContainer
center={[52.080190,4.310130]}
zoom={13}
scrollWheelZoom={true}
className="leaflet-container"
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{data.features.map(seedlibrary => (
<Marker
key={seedlibrary.properties.library_ID}
position={
seedlibrary.geometry.coordinates[1],seedlibrary.geometry.coordinates[0]
}
animate={false}
/>
))}
<Popup>
Text
</Popup>
</MapContainer>
</div>
)
}
export default Map
components/Map/seedlibraryData.json:
{
"type": "FeatureCollection","features": [
{
"type": "Feature","properties": {
"library_ID": "01","location_name": "Stadsoase Spinozahof","street": "Repelaerstraat 61","zipcode": "2515 LX","city": "Den Haag","website": "http://stadsoasespinozahof.nl/"
},"geometry": {
"type": "Point","coordinates": [52.072421,4.315050]
}
},{
"type": "Feature","properties": {
"library_ID": "02","location_name": "Hof van Wouw","street": "Lange Beestenmarkt 49-85","zipcode": "2512 EB","website": "https://hofvanwouw.nl/"
},"coordinates": [52.073980,4.307760]
}
}
]
}
pages/index.js:
import React from 'react';
import Map from '../components/Map/'
function HomePage() {
return (
<div>
<div>
<Map />
</div>
</div>
)
}
export default HomePage
编辑: 我找到了解决方案:@ghybs 为我指出了好的方向。我再次检查了传单反应文档。弹出标签应该在 Marker 标签内。相反,我在其中放置了一个自关闭 Marker 标签。
Map.js 解决方案:
import 'leaflet/dist/leaflet.css'
import { MapContainer,TileLayer } from 'react-leaflet';
import * as data from './seedlibraryData.json';
function Map() {
return(
<div>
<MapContainer
center={[52.080190,4.310130]}
zoom={13}
scrollWheelZoom={true}
className="leaflet-container"
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{data.features.map(seedlibrary => (
<Marker
key={seedlibrary.properties.library_ID}
position={[
seedlibrary.geometry.coordinates[0],seedlibrary.geometry.coordinates[1]
]}
animate={false}
>
<Popup>
{seedlibrary.properties.location_name}
{seedlibrary.properties.street}
{seedlibrary.properties.zipcode}{seedlibrary.properties.city}
</Popup>
</Marker>
))}
</MapContainer>
</div>
)
}
export default Map
解决方法
您指定标记位置的语法可疑:
<Marker
position={
seedlibrary.geometry.coordinates[1],seedlibrary.geometry.coordinates[0]
}
/>
好像你应该把坐标写成一个数组,例如:
<Marker
position={[
seedlibrary.geometry.coordinates[1],seedlibrary.geometry.coordinates[0]
]}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。