有没有办法在 TypeScript 和 React 中构建水平指南针

Question

我目前正在使用 TypeScript/React 开发 Web 应用程序。 现在我正在寻找一种构建水平指南针的方法，如下所示： https://imgur.com/gallery/vPg7sF3/comment/1382565763

我有一个罗盘应指向的度数

我不知道从哪里开始

有人可以帮助我吗？

Answer 1

当然可以这样做，但这取决于您的期望。一种实现是单独跟踪字母（例如仅实现北：https://codesandbox.io/s/magical-sutherland-1e8pv） 并为其他方向添加等效逻辑，这将决定何时显示每个字母。对于北方来说，在 180 度半径（因此为简单起见，罗盘宽度为 180px）内显示

coordinate

是有意义的，这构成了您所看到的“罗盘的一半”，从侧面看，如图所示。

这有道理吗？

Answer 2

2023年，浏览器API发生了很大变化。有一个反应包react-world-compass很好地解决了这个问题。

一个可行的演示是这里。