react-google-charts Marker GeoChart 标记不起作用

Question

我一直在尝试使用 react-google-charts API 中的 <Chart /> react 组件，但是，我似乎无法让标记显示在地图上。

我注意到，即使是 React Google Charts 网站上的 Marker GeoCharts 示例也没有功能标记。

这是来自网站的代码 sn-p：

<Chart
  width={'500px'}
  height={'300px'}
  chartType="GeoChart"
  data={[
    ['City', 'Population', 'Area'],
    ['Rome', 2761477, 1285.31],
    ['Milan', 1324110, 181.76],
    ['Naples', 959574, 117.27],
  ]}
  options={{
    region: 'IT',
    displayMode: 'markers',
    colorAxis: { colors: ['green', 'blue'] },
  }}
  // Note: you will need to get a mapsApiKey for your project.
  // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
  mapsApiKey="YOUR_KEY_HERE"
  rootProps={{ 'data-testid': '2' }}
/>

这是输出的屏幕截图：

我还生成了自己的 API 密钥，并且我还尝试在 Chart 组件中使用“columns”道具。我似乎仍然无法让标记工作。

即使你不知道如何解决这个错误，如果你对可以与 react 一起使用的交互式地图有任何建议（并且我可以添加交互式标记），请告诉我！

Answer 1

您必须启用 Geolocation API 和 Geocoding API 才能使标记工作。