使用highEcharts做出中国地图的效果图

最新推荐文章于 2025-06-17 11:10:40 发布

追逐春天的大孩子

最新推荐文章于 2025-06-17 11:10:40 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 地图文章标签： highEcharts 中国地图

本文链接：https://blog.csdn.net/weixin_43709908/article/details/107823074

js 同时被 2 个专栏收录

36 篇文章

订阅专栏

地图

4 篇文章

订阅专栏

本文介绍如何使用highEcharts库创建一个展示中国地图效果的图表，通过代码实例详细阐述绘制过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container" style="height: 100%;width: 100%;"></div>
    //js需要自己去官网上面进行下载，直接进行引用即可，同时可以根据自己的需要进行地图的自我定制。
    <script src="./highmaps.js"></script>
    <script src="./jquery.js"></script>
    <script src="./drilldown.js"></script>
    <script src="./exporting.js"></script>
    <script>
        var map = null,
            geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
        $.getJSON(geochina + 'china.json&callback=?', function (mapdata) {
            var data = [];
            // 随机数据
            Highcharts.each(mapdata.features, function (md, index) {
                var tmp = {
                    name: md.properties.name,
                    value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
                };
                if (md.properties.drilldown) {
                    tmp.drilldown = md.properties.drilldown;
                }
                data.push(tmp);
            });
            map = new Highcharts.Map('container', {
                chart: {
                    events: {
                        // drilldown: function (e) {
                        //     this.tooltip.hide();
                        //     console.log(e);
                        //     // 异步下钻
                        //     if (e.point.drilldown) {
                        //         var pointName = e.point.properties.fullname;
                        //         map.showLoading('下钻中，请稍后...');
                        //         // 获取二级行政地区数据并更新图表
                        //         $.getJSON(geochina + e.point.drilldown + '.json&callback=?', function (data) {
                        //             data = Highcharts.geojson(data);
                        //             Highcharts.each(data, function (d) {
                        //                 if (d.properties.drilldown) {
                        //                     d.drilldown = d.properties.drilldown;
                        //                 }
                        //                 d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                        //             });
                        //             map.hideLoading();
                        //             map.addSeriesAsDrilldown(e.point, {
                        //                 name: e.point.name,
                        //                 data: data,
                        //                 dataLabels: {
                        //                     enabled: true,
                        //                     format: '{point.name}'
                        //                 }
                        //             });
                        //             map.setTitle({
                        //                 text: pointName
                        //             });
                        //         });
                        //     }
                        // },
                        // drillup: function () {
                        //     map.setTitle({
                        //         text: '中国'
                        //     });
                        // }
                    }
                },
                title: {
                    text: '中国地图'
                },
               
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: 'bottom'
                    }
                },
                tooltip: {
                    useHTML: true,
                    headerFormat: '<table><tr><td>{point.name}</td></tr>',
                    pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
                        '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
                        '<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +
                        '<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>',
                    footerFormat: '</table>'
                },
                colorAxis: {
                    min: 0,
                    minColor: '#fff',
                    maxColor: '#006cee',
                    labels: {
                        style: {
                            "color": "red", "fontWeight": "bold"
                        }
                    }
                },
                series: [{
                    data: data,
                    dataLabels: {
                        enabled: true,
                        color: '#238F7E',
                        format: '{point.name}',
                    },
                    mapData: mapdata,
                    joinBy: 'name',
                    name: '中国地图',
                    states: {
                        hover: {
                            color: '#a4edba'
                        }
                    }
                }]
            });
        });

    </script>
</body>

</html>