高级地图加勒比地图

Question

我试图用高地图显示点(lat/long)。我已经为我们成功地做到了这一点，因为有一个完成的地图。现在，我正试图展示加勒比地区的一些要点。我找到了以下创建加勒比地图的链接：演示

问题是这个选项，我只能为整个国家设定价值。但我需要用价值观在不同的国家设定具体的观点。例如加州地图。

​

我试图将示例代码更新为：

import mapDataUSWithoutCentral from "@highcharts/map-collection/custom/north-america-no-central.geo.json"

    var dataCaribbean = [{
    'hc-key': 'cu', //Cuba
    value: 0
},{
    'hc-key': 'bs', //Bahamas
    value: 0
},{
  'hc-key': 'tc', //Turks and Caicos Islands
  value: 0
},{
  'hc-key': 'ky', //Cayman Islands
  value: 0
},{
  'hc-key': 'ht', //Haiti
  value: 0
},{
  'hc-key': 'do', //Dominican Republic
  value: 0
},{
  'hc-key': 'jm', //Jamaica
  value: 0
},{
  'hc-key': 'pr', //Puerto Rico
  value: 0
},
{ z: 10, keyword: "demo", lat: 23.113592, lon: -82.366592, color: '#ff0000' }
];

  const mapOptionsCaribbean = {
    chart: {
      map: mapDataUSWithoutCentral
    },
    title: {
      text: 'Caribbean'
    },
    mapNavigation: {
      enabled: true,
  },
    series: [{
      data: dataCaribbean,
      mapData: mapDataUSWithoutCentral,
      joinBy: 'hc-key',
      allAreas: false,
      name: 'Random data',
      states: {
          hover: {
              color: '#a4edba'
          }
      },
      dataLabels: {
          enabled: true,
          format: '{point.name}'
      }
  }]
  }

但结果只是：

没有显示数据数组中的最后一点。

Answer 1

您需要创建另一个具有mapbubble类型的系列，并添加proj4库：

series: [...,
  {
    type: "mapbubble",
    data: [...]
  }
]

现场演示： https://codesandbox.io/s/highcharts-react-demo-o5roi

API参考： https://api.highcharts.com/highmaps/series.mapbubble.data