我想使用這張地圖，這是它的鏈接：https : //www.react-simple-maps.io/examples/map-chart-with-tooltip/
問題是用戶必須將滑鼠懸停在地理上才能看到國家/地區名稱，但我也希望名稱也顯示在地理上。
uj5u.com熱心網友回復：
您可以使用這個名為標記的 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);
我已經嘗試在螢屏上使用單個標記，它按預期作業，如果這有幫助，請告訴我，干杯！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/402907.html
標籤：