如何在 jVectorMap - React 中将国家名称弹出窗口翻译成其他语言

Question

我一直在寻找答案，但找不到任何解决方案。假设我网站的默认语言设置是英语，当用户将鼠标悬停在地图上时，它会显示国家名称。我想在用户将网站语言更改为法语并将鼠标悬停在以法语显示国家/地区名称的地图上时实现它，有什么办法吗？

代码如下

<VectorMap
  map={'world_mill'}
  series={{
    regions: [
      {
        values: upcaseKeys(totalVisitors),
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial',
      },
    ],
  }}
  selectedRegion={[]}
  showTooltip={true}
/>

因此，当我将网站从英文更改为法文时，China 一词应该以法文显示。

Answer 1

您可以使用 <VectorMap /> 中提供的 onRegionTipShow 方法来做到这一点。只需简单地创建一个函数，它将采用国家名称：

const translateCountryName = (e, el) => {
    const countryName = el.html();
    el.html(t(`country:${countryName}`));
  };

其中 t('country:${countryName}') 是 NextJS i18n/Internationalization

现在您可以在 VectorMap 组件中使用此功能：

  <VectorMap
                  map={'world_mill'}
                  series={{
                    regions: [
                      {
                        values: upcaseKeys(totalVisitors),
                        scale: ['#C8EEFF', '#0071A4'],
                        normalizeFunction: 'polynomial',
                      },
                    ],
                  }}
                  selectedRegion={[]}
                  showTooltip={true}

                  //ur function is below
                  onRegionTipShow={translateCountryName}
                />

如何在 jVectorMap - React 中将国家名称弹出窗口翻译成其他语言

How do I translate Country name pop-up to other language in jVectorMap - React

reactjs

jvectormap