在react地图中的地图上添加国家名称

Question

我想使用这个地图，这里是它的链接：https://www.react-simple-maps.io/examples/map-chart-with-tooltip/

问题是，用户必须将鼠标悬停在地理位置上才能看到国家名称，但我希望名称也在地理位置。

Answer 1

您可以使用这个名为标记的npm的内置功能来实现这一点。

标记文件

我试着自己实现，但这个功能需要一组坐标传递到标记中，该标记将在您的情况下在各自的国家设置您的标记

我仍然在发布我尝试过的代码，您只需要将一个坐标数组传递给这个标记

import React, { memo } from "react";
import {
ZoomableGroup,
ComposableMap,
Geographies,
Geography,
Marker,  // import this 
text.    // import this
} from "react-simple-maps";
const geoUrl =
"https://raw.githubusercontent.com/zcreativelabs/react-simple- 
maps/master/topojson-maps/world-110m.json";
const rounded = num => {
if (num > 1000000000) {
return Math.round(num / 100000000) / 10 + "Bn";
} else if (num > 1000000) {
return Math.round(num / 100000) / 10 + "M";
} else {
return Math.round(num / 100) / 10 + "K";
}
};
const MapChart = ({ setTooltipContent }) => {
return (
<>
<ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>
<ZoomableGroup>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map(geo => {
const { NAME, POP_EST } = geo.properties;
setTooltipContent(`${NAME} — ${rounded(POP_EST)}`); // i have set the state outside of the tooltip
return(
<>
<Geography
key={geo.rsmKey}
geography={geo}
style={{
default: {
fill: "#D6D6DA",
outline: "none"
},
hover: {
fill: "#F53",
outline: "none"
},
pressed: {
fill: "#E42",
outline: "none"
}
}}
/>
<Marker coordinates={[-101, 53]} fill="#777"> // pass an array of coordinates here 
<text textAnchor="middle" fill="#F53">
{NAME, POP_EST}
</text>
</Marker>
</>
)
})
}
</Geographies>
</ZoomableGroup>
</ComposableMap>
</>
);
};
export default memo(MapChart);

我试过在屏幕上用一个记号笔，效果如预期，如果这有任何帮助，请告诉我，干杯！