我一直在尝试使用 API 中的 <Chart />
反应组件react-google-charts
,但是,我似乎无法让标记显示在地图上。
我注意到,即使是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 组件中使用“columns”道具。我似乎仍然无法让标记工作。
即使您不知道如何解决此错误,如果您对可以与 react 一起使用的交互式地图有任何建议(并且我可以添加交互式标记),请告诉我!