javascript - 如何使用 tabletop.js 将标记添加到传单 map ？

Question

我正在使用这个非常好的指南将 Google 工作表中的标记添加到基本的 leaflet.js map : https://rdrn.me/leaflet-maps-google-sheets/

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

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

这是一个 jfiddle，用一个标记点​​链接到演示表

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

map 部分:

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>');
    }
}

这应该在基本 map 上添加一个点。现在实际上 map 根本没有渲染，也没有显示任何标记。我在导致 map 显示为空白的代码中找不到任何问题，但可能存在一些问题。

然而，来自 gsheets 的标记已记录在控制台中，我怀疑我的代码中缺少与真正基本的 javascript 函数/循环/草率语法相关的内容。

还尝试了 init() 和 addPoints(data, tabletop) 部分到我拥有的 map ，其中 map 具有相同的 basemap 链接，渲染正常。添加这个仍然留下 map 渲染，但没有标记出现。同样，gsheets 作为对象数组加载。

谁能指出代码中的这个可能非常基本的问题？

编辑:

callback: myFunction, 

上面一行需要改成

callback: addPoints,

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

Answer 1

修复

• 尝试设置 map 位置绝对
• 调用init()函数

Working fiddle