前言

公司业务，需要做一个地图显示门店位置
需要根据门店位置来选择合适的地图，全国、省、市。
拿到这个 需求以后，
第一个问题是从哪里找到这些地图数据，地图数据要是错乱，后果巨大，甚至可能还有法律责任。

地图数据

这个问题推给你需求方。最后的结论是就用echarts官方的数据，可是没有市级的数据，市级数据这个功能就被砍掉了。

怎么动态加载不同的地图呢？

用import全部导入？比较蠢

首先我们需要先了解下echartsAPI

// data为对应的地图数据
echarts.registerMap(param, data);
map.setOption({
    geo: {
        // map: 'china' | '四川'
        // 必须要先引入了对应地图的js文件或者json文件，在这一步的时候，echarts会自动将对应的JS文件注入，地图才会显示.
        map: param,
    }
})

我们在这里导入不同的地图信息即可

const provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];
const provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
  // 判断当前要加载的地图是不是省？
    const isProvince = (name) => {
        return provincesText.some((province) => {
            return province === name;
        })
    }
  // 定义方法加载某个省的地图文件
    const loadScriptMap = (name, callback) => {
        // 获取这个省的拼音名字 name = '四川' => pinyinName = 'sichuan'
    const pinyinName = provinces[provincesText.indexOf(name)]
        // 引入这个对应的地图JSON，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
        // build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
        callback(name, require(`@/map/province/${pinyinName}`));
    }
     if (isProvince(mapName)) {
        // 从外部加载这个省的地图文件
        loadScriptMap(mapName, loadMap)
    } else {
        // 否则切换中国地图
        loadMap(mapName, require(`@/map/china.json`));
    }

完整代码

class MapComponent extends React.Component {
    drawMap(mapName, Data) {
        /*获取地图数据*/
        const color = '#FFF';//航线的颜色
        // 初始化echarts
        const map = echarts.init(document.getElementById('map'));
        // 定义初始加载的地图区域,中国地图
        // 定义加载地图的方法
        // 参数为要显示地图区域的名字
        const loadMap = (param, data) => {
            echarts.registerMap(param, data);
            // echarts.getMap(mapName).geoJson.features.forEach(function (v) {
            //     // 地区经纬度
            //     geoCoordMap[v.properties.name] = v.properties.cp;
            // });
            map.setOption({
                geo: {
                    // map: 'china' | '四川'
                    // 必须要先引入了对应地图的js文件或者json文件，在这一步的时候，echarts会自动将对应的JS文件注入，地图才会显示.
                    map: param,
                    itemStyle: {
                        normal: {
                            areaColor: '#00186E',
                            borderColor: '#195BB9',
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    emphasis: {
                        label: {
                            color: '#ffffff'
                        }
                    }
                },
                grid: {
                    borderWidth: 0,
                    top: '0%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%'
                },
                tooltip: {
                    formatter: function (e) {
                        if (typeof (e.value)[2] == "undefined") {
                            return e.name;
                        }
                    }
                },
                legend: {
                    show: false
                },
                toolbox: {
                    show: false
                },
                series: [
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: fontSize(.1),
                        itemStyle: {
                            normal: {
                                color: color,
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        data: Data.map(function (dataItem) {
                            return {
                                name: dataItem.name,
                                value: [dataItem.lng, dataItem.lat]
                            };
                        })
                    },
                ]
            }, true);
        }
        // 判断当前要加载的地图是不是省？
        const isProvince = (name) => {
            return provincesText.some((province) => {
                return province === name;
            })
        }

        // 定义方法加载某个省的地图文件
        const loadScriptMap = (name, callback) => {
            // 获取这个省的拼音名字 name = '四川' => pinyinName = 'sichuan'
            const pinyinName = provinces[provincesText.indexOf(name)]
            // 引入这个对应的地图JSON，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
            // build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
            callback(name, require(`@/map/province/${pinyinName}`));
        }
        if (isProvince(mapName)) {
            // 从外部加载这个省的地图文件
            loadScriptMap(mapName, loadMap)
        } else {
            // 否则切换中国地图
            loadMap(mapName, require(`@/map/china.json`));
        }
        window.addEventListener('resize', () => map.resize());
    }

    componentDidMount() {
        this.drawMap(this.props.store.map_shown_type === 0 ? 'china' :
            provincesText[this.props.store.map_shown_type - 1], this.props.store.storeList);
    }

    componentDidUpdate() {
        this.drawMap(this.props.store.map_shown_type === 0 ? 'china' :
            provincesText[this.props.store.map_shown_type - 1], this.props.store.storeList);
    }

    render() {
        const { store } = this.props;
        return (
            <div style={{
                height: "9.6rem",
                width: "10.05rem",
                marginLeft: ".26rem",
                float: "left",
                position: "relative",
                zIndex: 0
            }}>
                <MapBox id="map" />
            </div>
        )
    }

}

总结

如果你也有类似的需求，那么希望对你有点点帮助。