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

Question

我是javascript的新手..。我试图在类似的线程上找到一个问题的解决方案，但我不知道为什么它在我的情况下不起作用。我不能在那里发表评论，所以我增加了新的问题。

我所有的代码都在这里：链接到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配置中的任何内容，则需要从onload标记中删除body并将myFunction()转换为自调用函数： (function () { **body of the function** }())
• 或者只编辑Fiddle设置(将加载类型更改为无包装-底部)：