如何在带有tabletop.js的传单地图上添加标记？

Question

我正在使用这个非常好的指南将标记从Google表添加到一个基本的leaflet.js地图：https://rdrn.me/leaflet-maps-google-sheets/

问题是，使用这里的这些代码片段，我将记录并返回控制台中的所有数据，但是地图本身没有显示任何点。

这可能是一些基本的JavaScript问题，我无法看到。抱歉，还在学习。

这里有一个小提琴，链接到一个带有一个标记点的演示表

https://jsfiddle.net/xfs19cz7/1/

在地图部分：

function init() {
    Tabletop.init({
        key: '*url to gsheets here*',
        callback: myFunction,
        simpleSheet: true
    })
}

window.addEventListener('DOMContentLoaded', init)

function myFunction(data, tabletop) {
    console.log(data);
}


var map = L.map('map-div').setView([64.6220498,25.5689638], 5);
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Basemap (c) <a href="http://openstreetmap.org">OpenStreetMap</a>',
        minZoom: 5,
        maxZoom: 18
    });
basemap.addTo(map);

function addPoints(data, tabletop) {
    for (var row in data) {
        var marker = L.marker([
            data[row].Latitude,
            data[row].Longitude
        ]).addTo(map);
        marker.bindPopup('<strong>' + data[row].Info + '</strong>');
    }
}

这应该在基本地图上增加一点。实际上，地图根本没有呈现，也没有显示任何标记。我在代码中找不到任何问题，使地图显示为空白，但可能有一些问题。

然而，来自gsheets的标记被记录在控制台中，我怀疑我的代码中缺少一些与真正基本的javascript函数/循环/草率语法有关的东西。

还尝试了init()和addPoints(数据，桌面)部分到地图的地图上，地图有相同的基本地图链接，这表示OK。添加这仍然留下了地图呈现，但没有出现标记。同样，gsheets作为对象数组加载。

有人能指出这一点，可能是非常基本的，在代码中的问题吗？

编辑：

callback: myFunction, 

上面的行需要更改为

callback: addPoints,

另外，需要调用init函数并将位置设置为绝对值。感谢您在回答中所做的工作，并在下面标记为正确。

Answer 1

修复

• 尝试设置地图位置absolute
• 调用init()函数

工作小提琴