使用 tabletop.js 的传单地图中的标记为什么不起作用？

Question

我是 javascript 的新手...我试图在类似上找到问题的解决方案，但我不知道为什么它在我的案件。我不能在那里发表评论，所以我添加了新问题。

我所有的代码都在这里：Link to Fiddle

当我用示例更改代码时，地图停止显示。我哪里做错了？谢谢你帮助我。

js主要部分是这样的：

function myFunction() {

// Add MAP
var map = L.map('map').setView([54.151, 17.823], 9);
var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    minZoom: 5,
    maxZoom: 19
});
basemap.addTo(map);

/* ----------------------------------------------- */
// ZOOMING TO DETECT LOCATION
// map.locate({setView: true, maxZoom: 16});
/* ----------------------------------------------- */
// INFO ABOUT DETECT LOCATION      
function onLocationFound(e) {
    var radius = e.accuracy;

    L.marker(e.latlng).addTo(map)
        .bindPopup("Jesteśw odległości " + radius + " [m] od tego punktu.").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}

map.on('locationfound', onLocationFound);

// ERROR DETECT LOCATION
function onLocationError(e) {
    alert(e.message);
}

// MOUSE CLICK POSITION
var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("" + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

/* ----------------------------------------------- */
// MARKERS
//  var pkt = L.marker([54.46791, 17.0288]).addTo(map).bindPopup("CIO");
/* ----------------------------------------------- */

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

function init() {
    Tabletop.init({
        key: 'https://docs.google.com/spreadsheets/d/1BTlWo-T636OCGK-tRMHRP55MQ24OwQ-ZF9yOszyppxk/edit?usp=sharing',
        callback: addPoints,
        simpleSheet: true
    })
}
init()
}

Answer 1

JSFiddle 中的代码不起作用，因为默认的 JSFiddle javascript 加载类型设置为 On Load。这意味着它将加载您在 JavaScript 选项卡中拥有的所有内容，而无需您手动加载任何内容。

但是你的整个事情初始化为 onload 回调到 myFunction() 并且它永远不会在启用该设置的情况下触发。您有两种可能的解决方案：

如果您不想更改 Fiddle 配置中的任何内容，则需要从 body 标记中删除 onload 并更改 myFunction() 进入自调用函数：

(function () { **body of the function** }())
或仅编辑 Fiddle 设置（将加载类型更改为无包装 - 底部）：

使用 tabletop.js 的传单地图中的标记为什么不起作用？

Markers in leaflet map using tabletop.js Why its not working?

javascript

leaflet

tabletop.js