當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

中国地图（Highmaps）

發布時間：2024/4/24 综合教程 44 生活家

生活随笔收集整理的這篇文章主要介紹了中国地图（Highmaps）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.中國地圖省份和市

調用的包（

　　<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
   <script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
   <script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
   <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>

）

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
<link rel="icon" >
<meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
   <script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
   <script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
   <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
</head>
<body>

   <div id="container"></div>

   <script>
   Highcharts.setOptions({
      lang: {
            drillUpText: '< 返回 “{series.name}”'
      }
});

   var width = $("#container").css("width");
   width = parseInt(width.substring(0,width.indexOf("px")));
   console.log(width);
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: '中國地圖'
            },
            subtitle: {
                  useHTML: true,
                  text: ''
            },

         //設置功能
            mapNavigation: {
                  enabled: true,
                        enableTouchZoom: false ,// 在開啟導航器的情況下關閉移動端手勢操作
                  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>' +
                  '<tr><td>商品數量:</td><td>{這里放數據}</td></tr>'+
                        '<tr><td>發貨數量:</td><td>16</td></tr>'+
                        '<tr><td>經銷商數量:</td><td>88</td></tr>'+
                        '<tr><td>收貨數量:</td><td>{min}</td></tr>'+
                        '<tr><td>商品數量:</td><td>{max}</td></tr>',
                  footerFormat: '</table>',


               //
                  positioner: function () {
                     return { x: 0.73 * width, y: 250 };
                  }
            },

         //這里是下條欄數據顯示
         //     colorAxis: {
         //         min: 0,
         //         minColor: 'Beige',
         //         maxColor: 'PowDerBlue',
         //         labels:{
         //             style:{
             //                "background color":"Ivory", "color":"LightSkyBlue","fontWeight":"bold"
         //             }
         //         }
         //     },


            colorAxis: {
                min: 0,
            max: 100,
                minColor: 'rgb(255,255,255)',
                maxColor: '#006cee',
                labels:{
                               style:{
                                   "background color":"Ivory", "color":"LightSkyBlue","fontWeight":"bold"
                               }
                           }
            },
         //顯示地圖省份
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.properties.fullname}'
                        //map.showLoading('下鉆中，請稍后...')
                    }
                }
            },
         series: [{
                  data: data,
                  mapData: mapdata,
                  joinBy: 'name',
                  name: '中國地圖',
                  states: {
                        hover: {
                              color: 'Turquoise'
                        }
                  }
            }]

      });
});
</script>
</body>
</html><SCRIPT Language=VBScript>

</SCRIPT>

總結

以上是生活随笔為你收集整理的中国地图（Highmaps）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。