Question

我需要在我的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;

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

Answer 1

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

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

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

请按照步骤

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

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

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

GitHub Repository

Answer 2

由于要在应用中使用国家/地区地图渲染世界，因此需要导入fusioncharts.worldwithcounties.js，但是，如果您通过npm安装FusionCharts，则它在map文件夹中没有worldwithcountries文件，则无法获取该文件需要安装Fusionmaps，这是链接-https://www.npmjs.com/package/fusionmaps 这将安装所有地图定义文件，然后您可以使用以下命令：

import World from 'fusionmaps/maps/fusioncharts.worldwithcountries';

使用融合图无法加载地图图

2 个答案: