react-leaflet 相关问题

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

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

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

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

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

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

使用 Nextjs 设置传单不起作用

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

传单渲染问题 - 地图溢出

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

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

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

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

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

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 属性设置为单击标记时将调用的函数。该函数可以执行您想要的任何操作，例如打开新窗口或播放声音。 我希望这有帮助！如果您还有其他问题，请告诉我。

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

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

React传单显示简单路线

我想显示2个或更多坐标之间的路线。我不需要任何花哨的方向说明或开始和结束标记。所以基本上像 一样沿着 roa...

离子反应传单地图未显示在 Home.tsx 页面中

我的问题是当我启动 ionic 项目并安装react-leaflet 项目后 地图没有显示 所以我需要帮助怎么做 所以如果有人可以帮忙的话 Home.tsx 页面中的地图 我不...

带有 Next.js 的 React-Leaflet v4 13 无效的钩子调用

我将 Next.js 版本从 12 更新到 13 后出现问题 - 这也意味着我将 React 从 17 更新到 18，将 React-leaflet 从 3 更新到 4。我有这个组件： ` 函数 ChangeView({ ce...

使用传单在地图上设置标记

我想单击我的地图并设置一个周围有圆圈的标记。它显示了地图，但我无法设置标记。 console.log 没有显示任何内容。看来我的handleMapClick 功能不起作用。 小鬼...

React传单地图在数据更改时不更新数据/重新渲染

我正在使用react-leaflet制作每个州的县的地图，但它一次只显示一个州。理想情况下，它应该能够让用户选择感兴趣的状态，然后选择地图...

在反应中向我的地图容器添加 <circle> 时出现问题

我在react js中有一个，当我在代码中添加一个时，地图图块不会像以前一样加载，只渲染圆圈。地图是否以某种方式被覆盖？我相信我...

如何从leaflet.js中删除之前的路由

目前，每次我单击一个标记时，它都会显示从当前位置到单击的标记的路线。 我希望当我单击另一个标记时，之前的路线消失并显示...

无法在我的react项目上安装react-leaflet

在这里遇到一个问题，我无法将react-leaflet安装到我的项目中。我做到了 npm i 反应传单 但它不起作用，我什至做到了 npm i 传单。 我在这里做什么？

使用React-Redux时如何更新React-Leaflet V4中的mapRef？

我正在使用react-leaflet版本4.x。 我试图通过单击按钮来更新地图的缩放级别，就像一个简单的用例一样。我意识到您可以创建一个子组件来 我正在使用react-leaflet版本4.x。 我试图通过单击按钮来更新地图的缩放级别，就像一个简单的用例一样。我意识到您可以为 <MapContainer> 创建一个子组件并使用 useMap()，但我希望能够使用位于 <MapContainer> 组件外部的控件来更改地图。因此，我正在使用react-redux来尝试和管理状态。 我创建了一个切片，其缩放级别作为初始状态的一部分： import { createSlice } from "@reduxjs/toolkit"; export const mapViewSlice = createSlice({ name: "mapView", initialState: { zoom: 5, }, reducers: { changeZoom: (state, action) => { state.zoom = action.payload; }, }, }); export const { changeZoom } = mapViewSlice.actions; export default mapViewSlice.reducer; 然后我创建了 Map 组件，在单击按钮时调度 changeZoom 操作： import React, { useState, useEffect, useRef } from "react"; import { useSelector, useDispatch } from "react-redux"; import { MapContainer, TileLayer } from "react-leaflet"; import { changeZoom } from "./mapViewSlice"; import "./Map.css"; export const Map = () => { const mapRef = useRef(null); const zoomLevel = useSelector((state) => state.mapView.zoom); const dispatch = useDispatch(); return ( <div id="map-container" className="flex-container-row"> <MapContainer center={[37.0902, -95.7129]} zoom={zoomLevel} ref={mapRef}> <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> </MapContainer> <button onClick={() => dispatch(changeZoom(2))}>Change Zoom</button> </div> ); }; 如果我单击按钮并console.log(zoomLevel)，我会看到它按预期返回值2。但我需要更新地图参考。我尝试放入 useEffect 来更新地图，但收到一条错误消息，表明 mapRef 无法正常工作： useEffect(() => { mapRef.current.setZoom(zoomLevel); }, [zoomLevel]); 无法读取 null 的属性（读取“setZoom”） 类型错误：无法读取 null 的属性（读取“setZoom”） 我还尝试将参考更改为 whenReady 并使用 useState 来保存地图参考： const [map, setMap] = useState(null) //... useEffect(() => { if (map) { console.log(map); map.setZoom(zoomLevel); } }, [zoomLevel]); //... <MapContainer center={[37.0902, -95.7129]} zoom={zoomLevel} whenReady={setMap}> //... </MapContainer> 这给了我这样的错误： map.setZoom 不是函数 我该怎么做？ 编辑：我必须缺少从传单的导入才能访问 setZoom 功能，对吗？我如何获得这些方法？ 原来我需要做的就是将 ref 设置为 <MapContainer> 并将其与 useState 而不是 useRef 一起使用。我在react-leaflet文档中找到了使用外部控件控制地图的示例。 我最终的Map组件代码： import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { MapContainer, TileLayer } from "react-leaflet"; import { changeZoom } from "./mapViewSlice"; import "./Map.css"; export const Map = () => { const [map, setMap] = useState(null); const zoomLevel = useSelector((state) => state.mapView.zoom); const dispatch = useDispatch(); useEffect(() => { if (map) { map.setZoom(zoomLevel); } }, [zoomLevel, map]); return ( <div id="map-container" className="flex-container-row"> <MapContainer center={[37.0902, -95.7129]} zoom={zoomLevel} ref={setMap}> <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> </MapContainer> <button onClick={() => dispatch(changeZoom(2))}>Change Zoom</button> </div> ); };

错误无内容提供程序：useLeafletContext() 只能在测试地图组件笑话时在 <Map Container> 的后代中使用

我正在 jest 上编写一个组件的测试，该组件渲染地图并在地图上的两点之间构建路线。我使用 ReactLeaflet 和传单路由机。组件代码类似于...

删除折线第一个和最后一个节点之间的连接

在我的 React 程序中，我从本地 JSON 文件中读取并将坐标插入到数组中，以便它显示为折线： 让路径= []; 让 getData = (网络) => { 让元素=网络...