Highmaps 从 1.1.0 开始支持经纬度定位功能，该功能依赖第三方库 proj4js（需要在 Highmaps 之前引入），最新版的文件可以从 cdnjs 上获取

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>

有了经纬度支持后，我们可以通过 lon 和 lat 属性来指定经纬度进行描点

  1. series: [{
  2.     type: 'mappoint',
  3.     name: 'cities',
  4.     data: [{
  5.         name: '北京',
  6.         lat: 39.9032724643,   // 经纬度查询请到 http://www.gpsspg.com/maps.htm
  7.         lon: 116.4009203787
  8.     },{
  9.         name: '杭州',
  10.         lon: 120.1551656314,
  11.         lat: 30.2741702308
  12.     }]
  13. }]

中国主要城市经纬度数据

为了方便国内用户使用，我们将国内主要城市（338 个）的经纬度信息收集汇总并转换成 Highmaps 坐标值，最终的结果提供数据接口和文件下载，相关文件及调用方法如下：

  1. $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/cities.json&callback=?', function(cities) {
  2.      // ...
  3.      series: [{
  4.          type: 'mappoint',
  5.          name: 'cities',
  6.          data: [{
  7.              name: '北京',
  8.              x: cities['北京'].x,   // 直接使用转换好的坐标轴
  9.              y: -cities['北京'].y,
  10.          }]
  11.      }]
  12. })

在线试一试

JS 调用

  1. <script src="https://data.jianshukeji.com/geochina/cities.js"></script>
  2. <script>
  3.     var cities = Highcharts.map['china-cities'],
  4.         mappoint = Highcharts.geojson(cities, 'mappoint');
  6.     // ...
  7.     series: [{
  8.          type: 'mapbubble',
  9.          mapData: mappoint,
  10.          data: [{
  11.              name: '北京',
  12.              z: 1000
  13.          },{
  14.              name: '上海',
  15.              z: 800
  16.          }],
  17.          joinBy: 'name'
  18.     }]        
  19. </script>

在线试一试

经纬度转换

Highmaps 提供了 Chart.transformFromLatLon 和 Chart.transformToLatLon 这个两个函数用于经纬度值和 Highmaps 坐标轴进行互相转换。

在线试一试

如果不想依赖 Highmaps 直接进行经纬度转换，可以使用 proj4js 提供的函数进行转换，下面是简单的示例代码：

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
  2. <script>
  3.     // Highmaps 默认的坐标系统参数
  4.     var transform = { 
  5.         "crs": "+proj=lcc +lat_1=18 +lat_2=24 +lat_0=21 +lon_0=114 +x_0=500000 +y_0=500000 +ellps=WGS72 +towgs84=0,0,1.9,0,0,0.814,-0.38 +units=m +no_defs", 
  6.         "scale": 0.000129831107685, 
  7.         "jsonres": 15.5, 
  8.         "jsonmarginX": -999, 
  9.         "jsonmarginY": 9851.0, 
  10.         "xoffset": -3139937.49309, 
  11.         "yoffset": 4358972.7486 
  12.     };
  14.     /**
  15.      * 经纬度转换函数
  16.      * @param float lon 经度
  17.      * @param float lat 纬度
  18.      * @return [x, y]
  19.      */
  20.     function lonlatToXY(lon, lat) {
  21.         if(typeof lon === 'string') {
  22.             lon = parseFloat(lon);
  23.         }
  25.         if(typeof lat === 'string') {
  26.             lat = parseFloat(lat);
  27.         }
  29.         var projected = proj4(transform.crs, [lon, lat]),
  30.             cosAngle = transform.cosAngle || (transform.rotation && Math.cos(transform.rotation)),
  31.             sinAngle = transform.sinAngle || (transform.rotation && Math.sin(transform.rotation)),
  32.             rotated = transform.rotation ? [projected[0] * cosAngle + projected[1] * sinAngle, -projected[0] * sinAngle + projected[1] * cosAngle] : projected;
  33.          return [
  34.               parseInt(((rotated[0] - (transform.xoffset || 0)) * (transform.scale || 1) + (transform.xpan || 0)) * (transform.jsonres || 1) + (transform.jsonmarginX || 0)), 
  35.               parseInt((((transform.yoffset || 0) - rotated[1]) * (transform.scale || 1) + (transform.ypan || 0)) * (transform.jsonres || 1) - (transform.jsonmarginY || 0))
  36.         ];
  37.     }
  38. </script>

原文: https://www.hcharts.cn/docs/latlon