问题标签 [react-leaflet-v3]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
127 浏览

react-leaflet - 使用 React useEffect hook 更改 tileLayer

我正在尝试使用 React 的 useEffect 挂钩更改 tileLayer。这在从 DarkMode 切换到 LightMode Theme 时停止,从而将 tileLayer 更改为 Dark,反之亦然。

我已经阅读了数百页并尝试了许多替代方案,但它根本不起作用。有人能帮助我吗?

反应叶 v3.2.0

单击按钮会更改地图,但如果我激活 useEffect 它会显示此错误:

错误

0 投票
1 回答
336 浏览

reactjs - 如何在地图加载时打开特定的弹出窗口?

将 React-Leaflet V3.1.0 与 Express 服务器一起使用。

我的用户要求能够使用以下格式的链接:

https://www.mymap.com/id/:category/:id/:zoom

这会向服务器发送一个请求,以获取它们链接到的标记的纬度/经度坐标,然后将起始位置设置为这些坐标。我已经设法使用 React Router Dom 使这部分工作。现在理想情况下,我希望能够在地图加载时打开这个特定标记的弹出窗口。通过我设置查询组件的方式,能够在生成标记以指示这是感兴趣的标记时通过道具传递布尔值不是问题,我只是不确定如何激活弹出窗口。

我不太熟悉 useRef 以及如何准确地使用它来访问不同的 Leaflet 方法,但我昨天做了一些实验,并且能够获得一些似乎是朝着正确方向迈出的行为。弹出窗口在初始启动时没有加载,但是当我在地图上导航时,其他弹出窗口开始自动打开。话虽如此,我的地图渲染了数千个标记,并且每个标记超过 1 个渲染不值得权衡这个相对利基的功能,除非第二次渲染可以仅隔离到感兴趣的标记。

我认为可以让我到达我想要的地方但我无法让这个特定的方法触发: https ://leafletjs.com/reference-1.6.0.html#popup-openon

我最终使用了openPopup()类似于此链接: https ://stackblitz.com/edit/react-awtgn6?file=Map.js

但是我只能通过 useEffect + useRef 来实现(上面提到的结果)。

在将弹出窗口打开状态存储为状态时,我觉得我遗漏了一些明显的东西?

基本代码示例:

谢谢!

0 投票
0 回答
138 浏览

javascript - Uncaught TypeError: Cannot read property '_zoom' of undefined 在我使用反应传单标记簇后是什么意思?

我被困在反应传单中使用markercluster。我总是得到错误 Uncaught TypeError: Cannot read property '_zoom' of undefined,我已经添加了 markercluster.js,markercluster css 但仍然面临问题.. 这是我的代码

我使用反应 16.2 反应传单 v3 然后传单 1.7.1

如果你有一个替代的标记集群库..让我知道..谢谢

0 投票
1 回答
1412 浏览

reactjs - 模块解析失败:附加 babel_loader

我已经使用 react-leaflet 有一段时间了,几周后我删除了 node_modules 中的文件并重新安装了它们,我根本没有接触 react-leaflet 版本,但是当我尝试运行项目时,它给了我一个错误。


./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败:意外令牌 (10:41) 使用这些加载器处理了文件:

  • ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js 你可能需要一个额外的加载器来处理这些加载器的结果。| useEffect(function updatePathOptions() { | if (props.pathOptions !== optionsRef.current) {

| element.instance.setStyle(options); | optionsRef.current = 选项;


0 投票
0 回答
10 浏览

reactjs - 我只想访问用户添加新标记一次并且可以编辑此位置

我只想访问用户添加新标记一次并且可以编辑这个位置我使用这个代码但是当使用它时可以多个添加位置。

我使用“反应传单”:“^3.2.0”

请帮我

0 投票
0 回答
88 浏览

react-leaflet-v3 - 如何使用 react-leaflet-easyprint 和 react-leaflet 3

react-leaflet-easyprint 有 react-leaflet v1 和 v2 的示例和文档。

但是,开箱即用它似乎与 v3 不兼容。

我怎样才能使它与 v3 一起工作?

0 投票
0 回答
146 浏览

css - React-leaflet V3折线动画

我正在使用基于打字稿的 React 传单的两个位置创建折线。我想制作从源到目的地的动画。它应该看起来像在源到目的地之间流动的东西。我可以设置动画CSS Animation但是,我有一个问题,即最后一种颜色(黄色为 100%)和返回初始位置(蓝色为 0%)之间的过渡非常突然,不像其他变化那样平滑之间。我希望最后的更改也像其他更改一样平滑,使其看起来像一个连续的流程。谁能帮我解决这个问题?这是我的代码,

反应传单折线

折线的 CSS

0 投票
1 回答
58 浏览

react-leaflet-v3 - 如何将 react-leaflet 从 v.2.8 升级到 v.3

我在我的项目中使用 react-leaflet v.2.8。我想将 react-leaflet 升级到 v.3。但是怎么做?当我写“npm i react-leaflet”时,它只安装了 react-leaflet v.2.8。

0 投票
1 回答
32 浏览

typescript - 如何以编程方式在 react-leaflet 中添加一层?

我正在使用 react-leaflet (3.2.0) 和 TypeScript,在我的项目中,我不想使用 LayersControl 切换图层,但我需要以编程方式进行。所以我有这样的事情:

如果我正在尝试

它不会改变背景层。顺便提一句。getAnotherBgLayer 返回正确的背景层,因为:

工作正常。任何人都可以帮忙吗?问候, 米克

0 投票
0 回答
61 浏览

reactjs - 反应未定义的传单“初始化”

我正在尝试通过 react-leaflet 将 openstreet 地图添加到我的反应应用程序中。我成功地让地图显示并在应用程序上工作,但是由于以下错误,我无法在地图上找到标记:

TypeError: Cannot read property 'initialize' of undefined.

我在我的反应组件上使用我的地图,如下所示:

我在我的index.html文件中添加了 css 样式表和 js 脚本。

这就是我的 package.json 中与 react-leaflet 相关的包的方式: