Question

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

问题是，在这里使用这些代码段可以将所有数据记录下来并在控制台中返回，但是这些点都不会出现在地图本身上。

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

这是一个小提琴，用一个标记点链接到演示页

带有地图部分：

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）部件映射到地图上，而该地图具有相同的底图链接，因此呈现为OK。添加此标记仍会保留地图渲染，但不会显示任何标记。再次，将gsheets作为对象数组加载。

有人可以指出我在代码中这个很基本的问题吗？

编辑：

callback: myFunction,

上面的

行需要更改为

callback: addPoints,

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

Answer 1

修复

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

Working fiddle

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

1 个答案: