Javascript 如何使用react中的Highcharts绘制经纬度气泡图

我想使用

Highcharts

库在

react

项目中绘制带有气泡的

贴图（气泡贴图）

以下是我的要求：

绘制地图

显示地图上的特定点/位置（气泡）。（我们有 位置的经度和纬度）

• 所以我们有一个位置列表：位置名称，经度和纬度。我们想用气泡在地图上显示这些位置

这是我在react（类组件）中的源代码：

import React，{Component，Fragment}来自“React”；
从“Highcharts”导入Highcharts；
从“highcharts react official”导入highcharts react；
从“highcharts/modules/map”导入HighchartsMap；
从“@highcharts/map collection/countries/gb/gb all.geo.json”导入地图数据；
海图地图（海图）；
类BubbleMapChart扩展组件{
render（）{
常量选项={
图表：{
地图：“国家/gb/gb全部”，
},
标题：空，
地图导航：{
启用：对，
按钮选项：{
垂直排列：“底部”，
},
},
系列：[
{
名称：“基本地图”，
边框颜色：“A0”，
nullColor:“rgba（2002002002000.3）”，
showInLegend:false，
mapData:mapData，
},
{
名称：“分隔符”，
键入：“地图线”，
nullColor:#707070“，
showInLegend:false，
enableMouseTracking:false，
},
{
//使用lat/lon指定点
键入：“mappoint”，
名称：“城市”，
颜色：“红色”，
数据：[
{
名称：“伦敦”，
拉脱维亚：51.507222，
lon：-0.1275，
},
{
姓名：“伯明翰”，
拉脱维亚：52.483056，
lon：-1.893611，
},
{
名称：“利兹”，
拉脱维亚：53.799722，
lon：-1.549167，
},
{
名称：“格拉斯哥”，
拉脱维亚：55.858，
lon：-4.259，
},
{
姓名：“谢菲尔德”，
拉脱维亚：53.383611，
lon：-1.466944，
},
{
名称：“利物浦”，
拉丁美洲：53.4，
龙-3，
},
{
名称：“布里斯托尔”，
拉脱维亚：51.45，
lon：-2.583333，
},
{
名称：“贝尔法斯特”，
拉脱维亚：54.597，
lon：-5.93，
},
{
姓名：“勒威克”，
拉脱维亚：60.155，
lon：-1.145，
数据标签：{
对齐：“左”，
x:5，
垂直排列：“中间”，
},
},
],
},
],
};
返回(
);
}
}

这就是结果：

为什么没有显示泡沫

---

我如何在地图上显示位置？（请用react中的类组件示例指导我）。我已经在highcharts网站上看到了这些示例，但在我的类组件react项目中我无法做到这一点。

根据文档，highcharts映射不直接支持lat/lon，除非在highcharts映射之前加载proj4js库。这是因为Highcharts地图内部不使用lat/lon，而是使用0到1000的比例。因此，您使用的纬度/经度坐标可能不可见，因为它们不在地图上

---

要了解更多信息，您需要添加

proj4

：以支持纬度/经度坐标

import proj4 from "proj4";

class BubbleMapChart extends Component {
  render() {
    const options = {
      chart: {
        ...,
        proj4
      },
    ...
  }
}

---

现场演示：

API参考：

文档：

import proj4 from "proj4";

class BubbleMapChart extends Component {
  render() {
    const options = {
      chart: {
        ...,
        proj4
      },
    ...
  }
}