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

问题描述

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

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

这是该网站的代码段：

<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组件中使用“列”道具。我仍然似乎无法使标记正常工作。

即使您不知道如何解决此错误，如果您对可用于react的交互式地图（以及我可以向其中添加交互式标记）的任何建议，也请告诉我！

解决方法

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