Highmaps 是继承自 Highcharts 的专门用于地图的图表插件。Highmaps 除了根据值展示地理区域色块外，还支持线段（可以表示公路，河流等）、点（城市，兴趣点等）等其他地理元素。

      Highmaps 可以单独使用，也可以作为 Highcharts 的一个插件来使用。

      一、加载 js 文件

      同 Highcharts 使用 方法一样，Highmaps 只需要一个 js 文件即可运行

      1. <script src=“https://img.hcharts.cn/highmaps/highmaps.js“></script>

      如果是结合 Highcharts 一起使用，则是引入 map.js 即可

      1. <script src=“https://img.hcharts.cn/highcharts/highcharts.js“></script>
      2. <script src=“https://img.hcharts.cn/highmaps/modules/map.js“></script>

      二、加载地图数据文件

      Highmaps 支持 GeoJSON 标准数据，大多数 GIS 软件支持将常见的 GIS 数据文件（例如 Shapefile、KML）转换成 GeoJSON。

      目前有三种方式获取或创建地图数据：

      • 使用我们提供的 地图数据集，这里有 使用说明文档
      • 利用我们提供的 在线工具 将 SVG 地图转换成
      • 利用 GIS 软件将 GIS 数据转换成 GeoJSON 数据
      • 利用 SVG 编辑器绘制并使用我们的在线工具转换，详细步骤请参考 自定义地图 教程
        我们提供的地图数据集一般有两种格式，JS 和 JSON 文件，两者内容基本相同，只是加载方式不同，下面以加载中国地图（china.js）数据来说明：

      1. 加载 js 文件

      直接以 script 标签的形式加载文件，对应的取地图数据的方法是：

      1. <script src="https://data.jianshukeji.com/geochina/china.js"></script>
      2. <script>
      3.     var mapdata = Highcharts.maps['cn/china'];
      4. </script>

      其中 Highcharts.maps[‘cn/china’] 可以通过查看文件获得。

      2. 加载 json 文件

      由于跨域问题，所以加载 json 时需要用到 jsonp，这里直接用我们提供的接口即可

      1. $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(data) {
      2.     var mapdata = data;
      3. });

      三、初始化地图

      同 Highcharts 一样，Highmaps 也有多种初始化方式。如果您是以 jQuery 插件的形式运行 Highmaps，可以通过下面的方法初始化图表：

      1. $('#container').highcharts('Map', {
      2.     // ... 图表配置
      3. });

      否则就用 Highcharts.mapChart 初始化函数

      1. var map = Highcharts.mapChart('container', {
      2.     // ... 图表配置
      3. });

      四、加载数据并与地图关联

      加载地图数据并初始化图表后，我们可以将业务数据配置在 series.data 中，格式如下：

      1. $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(mapdata) {
      2.     var map = Highcharts.mapChart('container', {
      3.         series: [{
      4.             mapData: mapdata,
      5.             data: [{
      6.                 name: '北京',
      7.                 value: 2000,
      8.                 rank: 1
      9.             },{
      10.                 name: '上海',
      11.                 value: 1500,
      12.                 rank: 2
      13.             }]
      14.         }]
      15.     });
      16. });

      需要注意的是，设置完数据后，我们还需要指定数据与地图数据的关联属性，即 joinBy，例如：

      1. series: [{
      2.     mapData: mapdata,
      3.     data: [{
      4.         name: '北京',
      5.         value: 2000,
      6.         rank: 1
      7.     }, {
      8.         name: '上海',
      9.         value: 1500,
      10.         rank: 2
      11.     }],
      12.     joinBy: 'name'
      13. }]

      在线试一试

      GeoJSON 中的属性

      表示的是 data 里的 name 值与地图数据里的 properties.name 进行关联，并将对应的数据展示在对应的地图区域上，另外 joinBy 可以设置为包含两个值的数组，第一个值表示地图数据的 key，第二个值表示数据里的 key

      1. series: [{
      2.     mapData: mapdata,
      3.     data: [{
      4.         city: '北京',
      5.         value: 2000,
      6.         rank: 1
      7.     }, {
      8.         city: '上海',
      9.         value: 1500,
      10.         rank: 2
      11.     }],
      12.     joinBy: ['name', 'city']
      13. }]

      在线试一试

      原文: https://www.hcharts.cn/docs/highmaps-started