不明错误:没有提供上下文: useLeafletContext()只能在<MapContainer>的后代中使用
不明错误:没有提供上下文: useLeafletContext()只能在<MapContainer>的后代中使用
提问于 2022-01-13 10:56:32
我使用的是react-传单，我添加了一个带有事件处理程序的标记，点击可以缩放到这个标记，但是当我尝试使用const map=useMap()时，我得到的只是一个错误=>：
Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>可能有类似的问题，但没有答案，有人能帮忙吗？这是我的密码：
const map = useMap()
return (
<div>
<MapContainer
className="leaflet-container"
center={[33.8735578, 35.86379]}
zoom={9}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker
icon={port}
eventHandlers={{
click: (e) => {
map.setView(e.latlng, 14);
},
}}
position={[33.90757548098519, 35.51700873340635]}
></Marker>
</MapContainer>谢谢!
回答 1
Stack Overflow用户
发布于 2022-01-13 11:26:01
我通过为标记创建一个单独的组件并在其中实现useMap()来解决这个问题，它是这样工作的：
import React from "react";
import { Marker, useMap } from "react-leaflet";
export default function Markerwhatever(props) {
const map = useMap();
return (
<div>
<Marker
icon={props.icon}
position={[33.91907336973602, 35.51552625946782]}
eventHandlers={{
click: (e) => {
map.flyTo(e.latlng, 14);
},
}}
></Marker>
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70695397
复制相关文章
相似问题
腾讯云开发者
