如何在 Highmaps 地图气泡中从谷歌电子表格导入数据答案

【问题标题】：How to import data from google spreadsheet in Highmaps map bubble如何在 Highmaps 地图气泡中从谷歌电子表格导入数据
【发布时间】：2020-07-02 14:51:36
【问题描述】：

我用 Highmaps 构建了一个地图气泡，只要它从这个 js 文件中获取数据，它就可以正常工作：

<script src="https://medien.lb.madsack.de/rnd/jchrist/coronaweltkarte.js"></script>

见fiddle

下一步我想从这个谷歌电子表格中导入数据：

https://docs.google.com/spreadsheets/d/1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g/edit#gid=480378207

为此，我添加了以下代码：

  data: {
    googleSpreadsheetKey: '1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g'
  },

见fiddle

不幸的是，它不起作用。我还需要做什么？

【问题讨论】：

我会尝试从您的数据表中生成一个 JSON 文件，我找到了本教程 (medium.com/@scottcents/…)。之后你需要解析你的 JSON 文件。
谢谢你，贝尔纳多。我尝试通过 JSON 导入数据。至少显示了地图，但气泡仍然丢失。见fiddle

标签： google-sheets highcharts

【解决方案1】：

您需要使用seriesMapping 属性从您的数据中正确创建气泡系列。另外，添加地图系列，例如在complete回调函数中。

data: {
  googleSpreadsheetKey: '1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g',
  seriesMapping: [{
    z: 0,
    land: 4,
    lat: 5,
    lon: 6,
    infder: 3,
    totins: 1,
    genins: 2
  }],
  complete: function(options) {
    options.series[0].name = 'Infizierte';
    options.series.push({ // Add map series
      name: 'Länder'
    });
  }
}

现场演示： https://jsfiddle.net/BlackLabel/v3m59kyw/1/

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

【讨论】：

谢谢@ppotaczek 现在数据导入工作正常。但出现了另一个问题。当我最初缩放时，气泡位于正确的位置，但它们后面的地图却不是。见fiddle
上面描述的缩放问题一夜之间解决了，没有做任何事情。但是以另一种方式放大仍然会出现问题：fiddle
第一个版本在桌面上看起来不错，但在移动设备上仍然出现问题：fiddle
嗨@Johannes Christ，我已经测试了你的例子，一切似乎都很好。你能更准确地描述一下这个问题吗？
嗨@ppotaczek，当第一次加载地图时，气泡和地图不适合：johanneschrist.de/grafiken/weltkarte1.png 例如，美国的气泡位于大西洋中部。当我通过拖放移动地图或放大地图时，会移动正确的位置：johanneschrist.de/grafiken/weltkarte2.png