react-google-charts 標記 GeoChart 標記不起作用

Question

我一直在嘗試使用react-google-charts API 中的<Chart /> 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 密鑰，並且還嘗試在圖表組件中使用“列”道具。 我似乎仍然無法讓標記起作用。

即使您不知道如何解決這個錯誤，如果您對可與 react 一起使用的交互式地圖有任何建議（我可以添加交互式標記），請告訴我！

Answer 1

您必須啟用 Geolocation API 和 Geocoding API 才能使標記工作。