如何使用 tabletop.js 将标记添加到传单地图？

Question

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

问题是，在这里使用这些代码片段，我得到了控制台中记录并返回的所有数据，但是 none 的点出现在地图本身上。

这可能是一些我看不到的非常基本的 JavaScript 问题。不好意思，还在学习中。

这是一个 jfiddle，link演示 sheets 有一个标记点

地图部分：

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(data, tabletop) 部分添加到我拥有的地图中，该地图具有相同的底图 link，结果显示正常。添加这个仍然留下地图渲染，但没有标记出现。同样，gsheets 被加载为一个对象数组。

任何人都可以指出代码中的这个可能非常基本的问题吗？

编辑：

callback: myFunction,

上面的行需要更改为

callback: addPoints,

另外，需要调用init函数并将position设置为absolute。感谢您在下面标记为正确的答案中工作 fiddle。

Answer 1

修复

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

Working fiddle

如何使用 tabletop.js 将标记添加到传单地图？

How to add markers to leaflet map with tabletop.js?

javascript

leaflet

tabletop.js