- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在尝试使用 react-leaflet
的 bounds
属性时遇到了问题。我的用例是我的应用程序在状态中定义了一些初始边界(比方说,后备边界),并且这些边界在组件的第一次渲染期间传递。应用程序架构要求我发送请求以在组件内设置新边界,问题就来了。
在下面的示例中(我使用 setTimeout
模拟了 AJAX 请求)我们可以注意到超时后来自请求的新边界根本没有设置,我也没有很清楚为什么会这样。
我怀疑是动画的问题,因为当增加超时延迟时,问题没有发生,并且第二个边界设置正确。
我的设置:
"react": "17.0.0"
"leaflet": "1.6.0"
"react-leaflet": "2.7.0"
import React, { useState } from "react";
import { Map, ZoomControl, TileLayer } from "react-leaflet";
import "./styles.css";
import "leaflet/dist/leaflet.css";
export default function App() {
const [bounds, setBounds] = useState([
[75, -25],
[30, 45]
]);
setTimeout(() => {
setBounds([
[59.569068610511465, 10.387057922780514],
[59.565111563593824, 10.397184267640114]
]);
}, 200);
return (
<Map
bounds={bounds}
maxBounds={bounds}
zoomControl={false}
style={{
height: 400,
width: 400
}}
>
<TileLayer
url="//{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
maxZoom={21}
minZoom={4}
minZoomIsDrawing={18}
subdomains={["mt0", "mt1", "mt2", "mt3"]}
/>
<ZoomControl />
</Map>
);
}
最佳答案
您需要使用效果来获取 map 实例以更改 map 边界。
检查 here了解更多信息。
const mapRef = useRef(null);
useEffect(() => {
const map = mapRef.current?.leafletElement;
map.fitBounds([
[59.569068610511465, 10.387057922780514],
[59.565111563593824, 10.397184267640114]
]);
}, []);
关于javascript - 动态边界更改不会在 'react-leaflet' 中产生任何影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64714683/
我在 Chrome 上做了一些测试,requestAnimationFrame 产生了 61 fps 而 setTimeOut( callback, 0 ) 产生了 233 fps。 如果一个人想要超
当我调试代码时,我发现 GCC 和 Clang 都为 0.0/0.0 产生 nan,这是我所期望的,但 GCC 产生的 nan 将符号位设置为 1,而Clang 将其设置为 0(如果我没记错的话,与
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想改善这个问题吗?更新问题,以便将其作为on-topic
我在 R Studio 中有一个时间序列。现在我想计算这个系列的log()。我尝试了以下方法: i <- (x-y) ii <- log(i) 但是我得到以下信息:Warning message: I
我有兴趣了解 JavaScript 的内部结构.我试图阅读 SpiderMonkey 的来源和 Rhino但是绕过我的头是相当复杂的。 我问的原因是:为什么像 (![]+[])[+!![]+[]] 生
我们在 Delphi 中使用标准 TWebbrowser 组件,该组件在内部使用 mshtml.dll。另外,我们使用注册表来确保页面使用新的渲染引擎( Web-Browser-Control-Spe
我必须实现一个序列化/反序列化类,并且我正在使用 System.Xml.Serialization 。我有一些IList类型属性并希望在 IList 中序列化解码属于具有特定区域性信息的列表的所有十进
我有一个 Java 应用程序,它读取包含 SQL 查询的 JSON 文件,并使用 JDBC 在数据库上触发它们。 现在我有 5 万个这样的文件,我需要生成 5 万个独立线程来读取每个文件并将它们上传到
我正在尝试将 TensorFlow 入门页面上的示例线性回归程序调整为二次回归。为此,我只是添加了另一个变量并更改了函数。然而,这似乎会导致 NaN 值。这是我的代码: import numpy as
申请后KernelPCA到我的数据并将其传递给分类器 ( SVC ) 我收到以下错误: ValueError: Input contains NaN, infinity or a value too
这背后的想法是,如果我的数据库中存在登录名(正确的用户名+密码),我将重定向到一个页面,并且在进行此身份验证后,他们可以将消息存储在文本文件中。代码非常简单尽管我不确定为什么会收到 IllegalSt
我有一个返回 log10 值的函数。在将它们转换为正常数字时,出现溢出错误。 OverflowError: (34, 'Numerical result out of range') 我检查了日志值,
nosetests 抛出一个 ImportError,尽管我认为这是一个正确配置的 virtualenv。 ==============================================
我是这个网站的新手,所以如果我做错了什么,我提前道歉。当我尝试使用 kivy-garden 的 ScrollLabel 时,它给了我一个错误。基本上我正在尝试创建一个控制台日志,并且我需要能够在文本框
任何人都对 MDSJ 有任何经验?以下输入仅产生 NaN 结果,我不明白为什么。文档非常稀少。 import mdsj.Data; import mdsj.MDSJ; public class MDS
我有一个非常简单的 scala jcuda 程序,它添加了一个非常大的数组。一切都编译和运行得很好,直到我想从我的设备复制超过 4 个字节到主机。当我尝试复制超过 4 个字节时,我收到 CUDA_ER
我正在使用 Hero 组件在两个页面之间创建动画。Hero 组件用于包装一个 Image 小部件(没问题)和一个 Container 小部件(有问题)。 抛出以下溢出错误: ══╡ EXCEPTIO
我无法理解页面 https://developer.mozilla.org/en/JavaScript/Reference/Operators/Special/void 中的这一段: This ope
当在 Angular 中使用不立即触发事件的异步管道时(http 请求或任何有延迟的可观察对象),第一个值为 null为什么会这样?如何避免这种情况? 第一个变化: SimpleChange {
如果一个导入的库生成了一个会 panic 的 goroutine 怎么办?在这种情况下,开发人员无法阻止程序退出。 就像在这段代码中一样,使用延迟恢复调用一个错误的库没有帮助,因为该库正在生成一个 p
我是一名优秀的程序员,十分优秀!