如何在 jVectorMap - React 中将国家名称弹出窗口翻译成其他语言
How do I translate Country name pop-up to other language in jVectorMap - React
我一直在寻找答案,但找不到任何解决方案。
假设我网站的默认语言设置是英语,当用户将鼠标悬停在地图上时,它会显示国家名称。我想在用户将网站语言更改为法语并将鼠标悬停在以法语显示国家/地区名称的地图上时实现它,有什么办法吗?
代码如下
<VectorMap
map={'world_mill'}
series={{
regions: [
{
values: upcaseKeys(totalVisitors),
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
},
],
}}
selectedRegion={[]}
showTooltip={true}
/>
因此,当我将网站从英文更改为法文时,China 一词应该以法文显示。
您可以使用 <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}
/>
我一直在寻找答案,但找不到任何解决方案。 假设我网站的默认语言设置是英语,当用户将鼠标悬停在地图上时,它会显示国家名称。我想在用户将网站语言更改为法语并将鼠标悬停在以法语显示国家/地区名称的地图上时实现它,有什么办法吗?
代码如下
<VectorMap
map={'world_mill'}
series={{
regions: [
{
values: upcaseKeys(totalVisitors),
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
},
],
}}
selectedRegion={[]}
showTooltip={true}
/>
因此,当我将网站从英文更改为法文时,China 一词应该以法文显示。
您可以使用 <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}
/>