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

2022-01-12 00:00:00 leaflet javascript tabletop.js

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

I'm using this quite nice guide to add markers from a Google sheet to a basic leaflet.js map: https://rdrn.me/leaflet-maps-google-sheets/

问题是，使用这些代码片段，我在控制台中记录并返回了所有数据，但地图本身上没有出现任何点.

The problem is, using these code snippets here i get all the data logged and returned in the console, but none of the points appear on the map itself.

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

This is probably some really basic JavaScript issue that i'm not able to see. Sorry, still learning.

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

Here's a jfiddle, linking to a demo sheets with one marker point

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

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

This should add one point to a basic map. Now actually the map is not at all rendered, and no marker shows up. I can't find any issues in the code making the map show up blank, but there probably are some.

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

The marker from gsheets is however logged in the console, i suspect there is something missing in my code relating to really basic javascript functions / looping / sloppy syntax.

还尝试将 init() 和 addPoints(data, tabletop) 部分添加到我拥有的地图中，该地图具有相同的底图链接，渲染正常.添加它仍然会留下地图渲染，但没有出现任何标记.同样，gsheets 被加载为对象数组.

Also tried the init() and addPoints(data, tabletop) parts to a map i had where the map with the same basemap link, which rendereded OK. Adding this still left the map rendering, but no markers showed up. Again, the gsheets was loaded as an array of objects.

谁能指出我在代码中可能非常基本的问题?

Could anyone point me to this, probably very basic, issue in the code?

callback: myFunction,

上面一行需要改成

callback: addPoints,

另外，需要调用初始化函数并将位置设置为绝对位置.感谢您在下面标记为正确的答案中的工作小提琴.

also, init function needs to be called and position set to absolute. Thanks for the working fiddle in answer marked as correct below.

推荐答案

修复

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

工作小提琴

相关文章