javascript - 使用 tabletop.js 在传单 map 中标记为什么它不起作用？

Question

我对 javascript 很菜鸟...我试图在类似的 thread 上找到问题的解决方案，但我不知道为什么它在我的情况下不起作用。我无法在那里发表评论，所以我添加了新问题。

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

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

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 () { **函数体** }())

• 或者只是编辑 Fiddle 设置(将“加载类型”更改为“无换行 - 底部”):