问题标签 [react-simple-maps]

我正在使用 react-simple-maps 显示阿根廷的 SVG 地图，但问题是 react-simple-maps 以小尺寸显示地图并且未居中。我尝试了一些方法来修复它，但我不明白如何修复它。

这是我的代码所在的代码框：- https://codesandbox.io/s/basic-map-forked-9x1bl

我使用了反应简单的地图，并想添加一个自定义缩放控件以根据按钮单击更改缩放级别。

不幸的是，当我尝试更改缩放时，最终出现以下错误 -

基本上，缩放不适用于 1 以外的任何值。

我是新手react-simple-maps，我不确定如何将缩放功能应用于选择的县。

下面是包含CovidSearchState选定美国州和选定县州的 useState 的父组件。

下面是我的地图组件

我正在使用反应简单的地图。我创建了一张美国地图，我需要在点击时更改州的颜色。我可以通过向 Geography 组件添加新闻样式道具来更改它，但是当单击事件结束时颜色会恢复为默认颜色。有没有办法让点击的颜色保持不变？

我正在与您的图书馆合作项目，这就是我得到的

https://codesandbox.io/s/react-simple-maps-switching-topojson-on-zoom-forked-1s4qh?file=/src/index.js

如您所见，我正在尝试最大程度地缩放地图以根据坐标显示两个点

有什么问题，当您单击 2 时，缩放工作正常，但在 1 上，地图被放大到很远 - 我试图找出问题所在，因为我的计算仅在某些情况下有效。

正如您在函数 calcZoom 中看到的那样，我正在根据这两个坐标和 bbox 的质心计算缩放。

我基本上是在尝试将此 d3 示例移植到 react-simple-maps https://medium.com/@andybarefoot/making-a-map-using-d3-js-8aa3637304ee

如果有人可以提供帮助，那就太好了。

最好的！

I've made a covid related travel map here: Where Can We Go Now

It's a static react JS website, billy basic with create-react-app. It uses amongst other things the excellent React Simple Maps (kudos to the creator) and react-tooltip.

Expected behaviour:

Locally the tooltip works fine when tested with npm run start

I move my mouse over a country and the tooltip displays some relevant information approximately where my mouse is on the map.

The Problem:

. . . once published with npm run build sort of works but strange things happen.

Please follow link to website to observe, but in short, if the sea (i.e. an area that isn't a country - so not defined by an svg in the topojson) is clicked then the tooltip is place at the top centre of the whole map itself.

Some bits of relevant code:

Index.js (snippet):

MapChart.js (snippet):

What I've tried:

Variations of setting tooltip position, and moving where and what data-tip="" is. Also, banging head on wall.

我正在尝试制作一个包含世界地图的交互式页面，当您单击某个位置时，它会创建一个标记并保存坐标。关于如何实现这一目标的任何想法？

嘿，我只是想知道翻译世界地图工具提示内容的方法是什么。问题是我的地理位置数据都是英文的。现在我想用 i18next react 将我的网站翻译成不同的语言。但是，如果我从 api 收到的所有地理数据都是英文的，我不知道该怎么做？你会如何解决这个问题？

这是我的世界地图的截图：带有工具提示的世界地图 我知道如何翻译“平均智商”和“所进行的测试：”。问题是国名。因为我从只有英文的 topojson 获得了这些信息......

我正在尝试制作一张地图，当您将光标悬停时会显示该国家/地区的名称。为此，我使用 react-simple-map 和 react-tooltip：

这工作正常，但是在缩放和移动地图时出现问题 - 焦点转移到整个地图（ComposableMap），带有国家名称的面板出现在地图上方，而不是国家上方：

在 react-simple-maps 网站上提到，无法直接在 Geography 上设置数据提示。有没有办法解决这个问题？如果我使 ComposableMap 不可聚焦有帮助吗？

我正在尝试使用 来创建我的祖国的交互式地图，我react-simple-maps遇到了一个问题，我正在渲染的地图非常小，我尝试过使用height/width和缩放，但我似乎无法让地图渲染得大于scale(8).

最小可用代码重新创建： https ://codesandbox.io/s/zoom-controls-forked-g47m1?file=/src/MapChart.js