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

直接上代码吧

<!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: '',
                    pointFormat:''+''+''+'',
                    footerFormat:'
{point.name}
全称{point.properties.fullname}
行政编号{point.properties.areacode}
父级{point.properties.parent}
经纬度{point.properties.longitude},{point.properties.latitude}
'
}, 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>

你可能感兴趣的:(js,地图,highEcharts,中国地图)