问题标签 [react-leaflet]

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 投票
2 回答
1621 浏览

javascript - 如何编写一个输出反应传单标记的组件?

应该如何编写在地图上输出 Marker 的自定义反应组件?我需要像这样工作:

我制作了MyMarker这样的组件https://github.com/varya/react-leaftlet-test/blob/master/src/MyMarker.js但这会出错:

我想组件不仅应该扩展MapLayer,还应该提供特殊的接口。什么不见​​了?我在文档中找不到类似的例子。

另外,我应该怎么做才能输出几个标记?我的意思是,在 React 中,它需要在一个包装器中。但它不能只<div>用于地图。这个包装器应该怎么写?

PS:这是我展示我的案例的仓库 https://github.com/varya/react-leaflet-test

0 投票
1 回答
15135 浏览

javascript - 反应传单边界

现在我正在通过传递 bounds 参数来设置我的反应传单地图的边界,如下所示:

问题是有时会在地图的最外层(在视图中)呈现标记,因此除非我拖动地图或缩小一个点,否则标记甚至不可见。我试图用缓冲区解决这个问题,或者尝试绘制边界然后使用缩放缩小一次,但似乎没有任何效果。你们有什么想法吗?

0 投票
1 回答
1065 浏览

javascript - 设置选项的正确方法是什么 component in the React-Leaflet library?

React-Leaflet 文档指定可以通过 props 设置某些动态属性。但是,还有许多其他可自定义的 Leaflet 属性/方法......需要注意的是,为了访问它们,您需要直接与 Leaflet 实例进行交互(在 React-Leaflet 文档中提到)。

我无法找到如何正确执行此操作的任何示例,但我确实设法让它工作:

JSFiddle 示例

这是最好的方法吗?

0 投票
1 回答
1861 浏览

javascript - Leaflet JS (react-leaflet) - 用透明颜色填充的边界框

我正在使用 react-leaflet 包,但是,如果您可以用普通的传单回答这个问题,那也会很有帮助。

我成功地平移到我提供的多边形的边界,如下所示:

但是,我希望整个多边形边界框是某种透明颜色,这样他们就可以准确地看到边界框在地图上的位置。这可能吗?

0 投票
2 回答
421 浏览

javascript - JS bind(),我需要两个“this”上下文

这是一个通用的 JS 问题。

在 React-leaflet 中,我想通过回调处理事件。被调用函数获取调用者(事件)上下文,该上下文可用于执行 this.getZoom() 之类的操作。

问题是同时我需要反应元素上下文来更新状态并调用其他方法。

要实现“this.getZoom()”,不应绑定回调,要实现“this.setState(...)”,我需要将回调绑定到“this”。

但是如何将调用者和回调上下文作为变量传递给回调呢?

或者可能是这种类型的问题以另一种方式解决?

看到这个jsfiddle:https ://jsfiddle.net/nf8k23s7/1/

0 投票
2 回答
489 浏览

clojurescript - Clojurescript react-leaflet 无法正确显示图块

我正在尝试使用 ClojureScript 中的 react-leaflet,但我对瓷砖的渲染方式有疑问:

  • 某些图块不显示
  • 在不同的城市有相邻显示的瓷砖

这是我的代码:

这是我在本地得到的结果。

乱七八糟的瓷砖

注意:调整浏览器的大小似乎有效果,所以这也可能是一个 css 问题(?)。我试过包括以下内容但没有效果:

0 投票
1 回答
989 浏览

javascript - TileLayer 以不同的顺序显示(使用 React-Leaflet 库)

我正在尝试使用库 react-leaflet 做一个简单的 Web 应用程序。

我有以下代码:

但是,TileLayer 始终以随机顺序显示。我已经阅读了很多它必须与ComponentDidMount()by一起使用的代码Reactjs,但是与库相比,我看到的渲染完全不同。

你知道我能做什么吗?

0 投票
1 回答
5123 浏览

javascript - 在 React-Leaflet 中获取自定义缩放按钮时遇到问题

我正在尝试构建自己的缩放按钮react-leaflet

我有以下代码:

所有这些都显示了很好的方式,但是现在我想放一个可以放大或缩小的功能。我不知道如何使用 react-leaflet 库调用传单的方法。
我尝试了很多方法来实现它,但没有成功。

你知道如何实现它吗?

0 投票
1 回答
1502 浏览

javascript - 传单弹出窗口不会打开(反应)

我正在为我使用 Leaflet 的反应应用程序(react-leaflet)制作地图视图。我可以在地图上绘制标记,但是我绑定到它们的弹出窗口在单击时不会打开。我首先尝试使用<Marker><Popup>组件,但这个Github 问题建议最好从地图组件中获取传单地图对象并将标记显式绑定到它。这就是我所拥有的:

即使我取消注释该marker.on('click'...)行,console.log似乎也不会触发。有人对可能发生的事情有任何想法吗?

0 投票
2 回答
7800 浏览

reactjs - 如何引用 react-leaflet 组件的传单层?

我使用react-leaflet在地图上可视化了一条很长的路径。用户可以从列表中选择,我希望所选路径具有不同的颜色。更改状态并再次渲染太慢,我正在寻找更快的解决方案。

传单路径元素有 setStyle() 方法,所以我的第一个想法是使用它而不是再次渲染。但是如何引用传单层呢?

那么在这段代码中我应该写什么而不是LEAFLET_POLYLINE呢?