react-leaflet 相关问题

我有一个基本的 React 应用程序，用户可以单击，地图将缩放到所选标记，这将按预期工作：函数 MyMap() { 我有一个基本的 React 应用程序，用户可以单击 <Marker>，地图将缩放到所选标记，这将按预期工作： function MyMap() { <MapContainer className="map" center = {[40, 10]} zoom = {10} zoomControl = {false} > <Markers> const map = useMap(); loc.map(loc => { return ( <Marker key={loc.properties.id} position={[loc.properties.y, loc.properties.x]} eventHandlers={{ click: () => { map.setView([loc.properties.y, loc.properties.x], 16) } }}> </Marker> ) }) </Markers> </MapContainer> } 现在我想做的是复制 map.setView() 功能以在按钮单击上工作。该按钮位于地图旁边的侧面板中，并且不是 <MapContainer> 的子按钮。每个 <Marker> 在侧面板上都有一个相应的按钮。主要应用程序代码如下所示： function App() { <SidePanel> <Button /> </SidePanel> <MyMap /> } 有没有一种方法可以轻松地从 map.setView() 事件处理程序访问 <Marker> 函数并在侧面板中的 <Button> 上使用它？您可能只想在按钮组件中创建一个函数，然后将该函数向下传递到定义映射变量的位置，然后在子组件的主体中调用该函数，而不是尝试访问事件处理程序，你可以调用map()函数。如果您可以在 MapContainer 外部访问您的位置，则 MapContainer 上有一个名为 whenCreated 的道具，它返回地图。您可以在 MapContainer 之外使用它。 const [map, setMap] = useState(null); const loc = []; <MapContainer whenCreated={setMap}> <Markers locations={loc} /> </MapContainer> <SidePanel> {loc.map((loc, index) => {/* Render button and add use map saved in state to attach click handler */})} </SidePanel> 从最新版本的react-leaflet（我相信是4.0+）开始，我们可以使用ref代替whenCreated，即： const ParentComponent = () => { const [map, setMap] = useState(null) return ( <MapContainer ref={setMap} /> ... </MapContainer> ) } 我们可以使用 map 以及其他所有相关功能。

reactjs leaflet react-leaflet

回答 3 投票 0

react 传单测量/标尺插件

我需要一个用于 React Leaflet 应用程序的标尺，但是，我能找到的只是列出的普通传单插件 https://leafletjs.com/plugins.html。我试图将它们全部包含在我的应用程序中，但每一个罪恶......

react-leaflet measurement

回答 3 投票 0

React-Leaflet 总是使用“MouseMove”重绘地图

我想在鼠标在我的 React 应用程序中移动时显示地理坐标。我注意到，通过“Mousemove”，地图会重复重绘所有数量较多的对象。我怎样才能...

javascript reactjs react-leaflet

回答 1 投票 0

React leaflet 热图图层 v3 缩放时的更新问题

我在移动设备上捏合缩放时遇到了react-leaflet-heatmap-layer-v3的更新问题，如图所示。如何相应地更新热图图层？我希望将热图图层更新为地图

reactjs heatmap react-leaflet

回答 1 投票 0

React Leaflet Geojson 工具提示。如何禁用单击或拖动时的黑色边框？

我对图书馆传单有疑问。我有大量 JSON 数据，它呈现并显示不同地区的边界。我在 GeoJSon 中添加了一个工具提示，它显示了该地区的名称。但是什么...

javascript reactjs leaflet geojson react-leaflet

回答 3 投票 0

渲染器在反应传单中折线的 PathOptions 中不起作用

我正在尝试将渲染器属性添加到 PathOptions 中以绘制折线，下面是它的代码：我正在尝试将渲染器属性添加到 PathOptions 中以绘制折线，这里是它的代码： <Polyline pathOptions={{ renderer: canvasRenderer, color: "Black", smoothFactor: 1, opacity: 1, weight: 3, }} positions={[51.505, -0.09],[51.51, -0.1],[51.51, -0.12],} eventHandlers={{ contextmenu(e) { //some function goes here. }, }} > const canvasRenderer = L.canvas({ tolerance: 5, }); 除了 canvasRenderer 所有其他选项均适用于 Polyline。如何使用 renderer 中的 PathOption 属性？在react-leaflet中，renderer中的PathOptions属性用于指定路径的渲染器，但它可能不适用于所有渲染器，特别是在某些情况下。如果 renderer 属性未按预期工作，您可以尝试以下操作：默认渲染器：如果想使用默认渲染器，则不需要在renderer中指定pathOptions属性。默认情况下，它使用 SVG 渲染器，这在大多数情况下都可以正常工作。 <Polyline pathOptions={{ color: "Black", smoothFactor: 1, opacity: 1, weight: 3, }} positions={[ [51.505, -0.09], [51.51, -0.1], [51.51, -0.12], ]} eventHandlers={{ contextmenu(e) { // some function goes here. }, }} /> 检查依赖项：确保您已安装所需的依赖项。自定义渲染器（例如 canvas 渲染器）可能需要额外的包才能正常工作。确保您已安装任何必要的软件包。自定义渲染器：如果您想使用像canvas渲染器这样的自定义渲染器，则应先定义canvasRenderer变量，然后再在pathOptions中使用它。您的代码似乎已正确定义 canvasRenderer。 const canvasRenderer = L.canvas({ tolerance: 5, }); // ... <Polyline pathOptions={{ renderer: canvasRenderer, color: "Black", smoothFactor: 1, opacity: 1, weight: 3, }} positions={[ [51.505, -0.09], [51.51, -0.1], [51.51, -0.12], ]} eventHandlers={{ contextmenu(e) { // some function goes here. }, }} /> 渲染器兼容性：请注意，并非所有渲染器都与所有功能完全兼容。根据您选择的渲染器，某些功能可能无法按预期工作或不受支持。确保您使用的渲染器与您要使用的特定功能兼容。如果您已按照这些步骤操作，但仍然遇到问题，您可能需要查阅 react-leaflet 的文档以及您正在使用的特定渲染器，以了解任何其他配置或故障排除步骤。

reactjs leaflet react-leaflet polyline renderer

回答 1 投票 0

React 传单多边形单击时有边框笔划（在 Chrome 中）

我在反应传单方面遇到了新问题这个问题突然出现。我不知道发生了什么，当点击多边形时，在 Chrome 浏览器中，这个笔画突然出现在多边形周围。

reactjs leaflet react-leaflet

回答 1 投票 0

带有反应传单的自定义标记图标

我尝试了在网络、Stackoverflow 和 Github 上找到的所有内容，但仍然无法成功。我想用自定义图标制作自定义标记，但是使用下面的代码我总是收到错误：'TypeE...

icons maps leaflet marker react-leaflet

回答 8 投票 0

如何在 React Redux 中使用 Leaflet 和 OpenStreetMap 进行位置搜索来查找我的城市位置

我的讲师指派我使用React（Redux）使用Leaflet（OpenStreetMap）将城市搜索添加到我的应用程序中，有人可以帮助我解决这个问题吗？以及需要什么依赖项？哈...

reactjs redux leaflet openstreetmap react-leaflet

回答 1 投票 0

使用 Nextjs 设置传单不起作用

我目前正在尝试在我的网站上添加可自定义的地图。但是当我尝试添加 React Leaflet 时，地图是可见的，但切入了不同的“传单图块”。我不知道是什么原因导致...

next.js leaflet react-leaflet

回答 3 投票 0

传单渲染问题 - 地图溢出

我创建了一个存储库来重现该问题。我在 React.js 中使用 Leaflet。问题是 Leaflet 地图在移动视图中溢出并且导航栏不可见。仅当用户登录并且是

javascript css reactjs leaflet react-leaflet

回答 1 投票 0

React Leaflet 标记集群：无效的 Hook 调用

我正在尝试使用这个名为 React Leaflet Markercluster 的库。我使用 React 版本 18.2.0。当我将代码放入我的应用程序时，我收到这样的错误 “无效的钩子调用。只能调用钩子

reactjs leaflet react-leaflet

回答 1 投票 0

React传单，是地名，不是坐标

是否可以在 React Leaflet 中渲染地图，给出地点名称而不是地图坐标？我希望输入地名，而不是给出地点坐标，例如。 “圣詹姆斯公园 &

javascript reactjs leaflet geocoding react-leaflet

回答 2 投票 0

React传单使一个标记忽略其事件，因此可以单击其他标记

我有这样的代码：返回我有这样的代码： return <React.Fragment key={i + 100}> <MapMarker obj={object} key={i} position={positionMap[i]} icon={objIcon} objName={convDataArr[1]} objType={convDataArr[2]} objStatus={convDataArr[3]} objcoalition={convDataArr[4]} objUnderAttack={convDataArr[5]} objNumUnits={convDataArr[6]} pane={convDataArr[2]} zIndexOffset={100} //riseOnHover={true} ></MapMarker> <FlameMarker key={i + 1000} position={positionMap[i]} icon={iconArray[21]} > </FlameMarker> </React.Fragment> 输出 2 个标记。 FlameMarker 与普通标记几乎相同。问题是，当绘制两个标记时，从可见性角度来看，所有内容都有效，显示目标标记，并显示动画火焰 gif。但是，我无法单击我的主标记，它是透明的，然后单击地图。我尝试使用 eventHandlers = {{ click: () => {} }, }} 但是 gif 是可点击的，这不是我想要的。当在 Chrome 中的开发者模式下手动添加 CSS 时，它可以工作，但是考虑到 React leaflet 只是删除给定的每个样式并使用它自己的样式，我如何手动添加此样式？问题在于 MapMarker 组件的 eventHandlers 属性覆盖了默认的单击事件处理程序。默认的单击事件处理程序使标记可单击。要解决这个问题，可以使用MapMarker组件的disableClick属性。 disableClick 属性将阻止标记可点击。这是更正后的代码： return <React.Fragment key={i + 100}> <MapMarker obj={object} key={i} position={positionMap[i]} icon={objIcon} objName={convDataArr[1]} objType={convDataArr[2]} objStatus={convDataArr[3]} objcoalition={convDataArr[4]} objUnderAttack={convDataArr[5]} objNumUnits={convDataArr[6]} pane={convDataArr[2]} zIndexOffset={100} disableClick ></MapMarker> <FlameMarker key={i + 1000} position={positionMap[i]} icon={iconArray[21]} > </FlameMarker> </React.Fragment> 在此代码中，MapMarker 组件的disableClick 属性设置为true。这将阻止标记被点击。您还可以使用MapMarker组件的onClick属性来定义您自己的点击事件处理程序。单击标记时将调用 onClick 属性。以下是带有自定义单击事件处理程序示例的代码： return <React.Fragment key={i + 100}> <MapMarker obj={object} key={i} position={positionMap[i]} icon={objIcon} objName={convDataArr[1]} objType={convDataArr[2]} objStatus={convDataArr[3]} objcoalition={convDataArr[4]} objUnderAttack={convDataArr[5]} objNumUnits={convDataArr[6]} pane={convDataArr[2]} zIndexOffset={100} onClick={() => { // Do something when the marker is clicked }} ></MapMarker> <FlameMarker key={i + 1000} position={positionMap[i]} icon={iconArray[21]} > </FlameMarker> </React.Fragment> 在此代码中，onClick 属性设置为单击标记时将调用的函数。该函数可以执行您想要的任何操作，例如打开新窗口或播放声音。我希望这有帮助！如果您还有其他问题，请告诉我。

javascript reactjs leaflet react-leaflet

回答 1 投票 0

React - 未捕获类型错误：无法读取未定义的属性（读取“纬度”）

我正在尝试使用传单库渲染一个显示多个标记的地图，为此我尝试在 localStorage 中存储多个地址，然后将它们取回并使用数组渲染所有标记...

reactjs typescript types leaflet react-leaflet

回答 1 投票 0

react-leaflet 相关问题

最新问题