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

Question

I have been trying to use the <Chart /> react component from the react-google-charts API, however, I can't seem to get the markers to show up on the map.

I noticed that even the examples of Marker GeoCharts on the React Google Charts site do not have functional markers.

Here is a code snippet from the site:

 <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' }} />

Here's a screenshot of the output:

I also generated my own API key, and I have also tried using the "columns" prop in the Chart component. I still can't seem to get the markers to work.

Even if you do not know how to solve this error, if you have any recommendations for interactive maps that can be used with react (and that I can add interactive markers to), please let me know!

Answer 1

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