reactjs - 使用融合图无法加载 map 图

我需要在我的React应用程序中使用融合图库集成地图。通过纱线配置的组件（包括融合图库）安装融合图库后，但是当我渲染地图时，它向我显示以下错误



出现错误后，我只是看着节点模块并检查文件是否存在，但似乎不存在，但是我的融合图成功安装且没有错误，那么这是怎么发生的呢？

这是我的代码

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);

class MapChart extends Component {
    state = {
        dataSource: {
            "chart": {
                showCanvasBorder: true,
                canvasBorderColor: "#000000",
                canvasBorderThickness: 1,
                showBorder: true,
                borderColor: "#000000",
                fillColor: "#f1f1f1",
                caption: "* USA traffic not displayed on Heat Map",
                includevalueinlabels: "1",
                showHoverEffect: false,
                showEntityHoverEffect: false,
                theme: "fusion",
            },
            data: [
                {
                    "id": "27",
                    "value": "8",
                    "color" : "#f65122"
                },
                {
                    "id": "159",
                    "value": "3",
                    "color" : "#fcc50b"
                },
                {
                    "id": "142",
                    "value": "3",
                    "color" : "#f65122"
                },
                {
                    "id": "141",
                    "value": "9",
                    "color" : "#f3172d"
                },
                {
                    "id": "173",
                    "value": "9",
                    "color" : "#f3172d"
                },
                {
                    "id": "113",
                    "value": "5",
                    "color" : "#f65122"
                },
                {
                    "id": "193",
                    "value": "5",
                    "color" : "#f65122"
                },
                {
                    "id": "122",
                    "value": "9",
                    "color" : "#f65122"
                }
            ]
        }
    }

    render() {
        return (
            <React.Fragment>
                <div style={{ width: '100%', margin: '20px', textAlign: 'center' }}><button><Link to="/">Back to home</Link></button></div>
                <div style={{ textAlign: 'center' }}>
                    <ReactFC
                        type="worldwithcountries"
                        width="80%"
                        height="500"
                        dataFormat="JSON"
                        dataSource={this.state.dataSource} />
                </div>
            </React.Fragment>);
    }
}

export default MapChart;

在这个问题上的任何帮助将不胜感激。谢谢！

最佳答案

Fusion Maps XT提供了交互式地图，可以有效地绘制地理数据，例如按地区划分的收入，按州划分的人口，调查和选举结果。您还可以在地图上放置标记，以精确定位办公地点和飞行路线等地点。它有1000多种地图，包括所有大洲，主要国家和美国所有州。

最初，Fusion图表库未提供任何地图集合。每当您在初始基础上安装融合图库时，软件包的map文件夹中只有很少的maps文件。因此，您的文件在整个软件包中不可用。他们在其官方页面上提供了链接，以下载与融合地图图表有关的所有地图。

要渲染这些地图，您需要从此处下载地图定义文件，然后将其复制粘贴到融合图表目录中的maps文件夹中。



请按照以下步骤


打开链接https://www.fusioncharts.com/download/map-definition-files
单击“下载地图定义文件（https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip）”，其中包含Fusion Maps XTall中所有可用地图的集合。FusionMaps XT中可用的所有地图
下载后，从此下载包中复制/ maps文件夹，并将其粘贴到您的融合图表文件夹中。
现在运行您现有的应用程序，将找到该文件，您的react应用程序将按预期运行。



融合图的官方网站上已经定义了所有信息，但没有以正确的方式，因此借助先前定义的链接，您将直接重定向到该说明页面。

在GitHub上，我使用了Fusionchart库创建了一个带有地图的存储库，因此您可以下载该存储库并检查地图的确切功能。

GitHub Repository