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

Question

我想使用这张地图，这是 link : 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);

我已经尝试在屏幕上使用单个标记，它按预期工作，如果这有任何帮助，请告诉我，干杯！

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

Adding countries name on the map in react maps

google-maps

google-maps-api-3

reactjs