如何使用tabletop.js向传单地图添加标记? [英] How to add markers to leaflet map with 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.

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

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

上面的

行需要更改为

line above needs to be changed to

callback: addPoints,

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

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

推荐答案

修复

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

• Try setting map position absolute
• calling the init() function

工作中的小提琴

这篇关于如何使用tabletop.js向传单地图添加标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！