时间戳

首页 > 解决方案 > 如何使用 tabletop.js 将标记添加到传单地图？

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

问题描述

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

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

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

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

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(data, tabletop) 部分添加到我拥有的地图中，该地图具有相同的底图链接，呈现正常。添加它仍然会留下地图渲染，但没有出现任何标记。同样，gsheets 作为对象数组加载。

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

编辑：

callback: myFunction,

上面的行需要更改为

callback: addPoints,

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

标签： javascriptleaflettabletop.js

解决方案

修复

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

工作小提琴

推荐阅读