使用tabletop.js的传单地图中的标记为何不起作用? [英] Markers in leaflet map using tabletop.js Why its not working?

问题描述

我对javascript没有兴趣...我试图在类似的

I'm noob to javascript... I tried to find a solution to a problem on a similar thread, but I don't know why it doesn't work in my case. I can't comment there so I add new question.

我所有的代码都在这里:链接到小提琴

All my code is here: Link to Fiddle

当我用示例更改代码时，地图停止显示. 我在哪里做错了?谢谢您的帮助.

When I changed code with example, the map stopped showing. Where have I done the mistake? Thank You for helping me.

js的主要部分是这样的:

Main part of js is like this:

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()
}

推荐答案

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

The code in JSFiddle doesn't work because the default JSFiddle javascript Load Type setting is On Load. This means that it will load everything that you have in JavaScript tab without you needing to load anything manually.

但是您的整个事情都以onload回调到myFunction()进行初始化，并且永远不会在启用该设置的情况下触发.您有两种可能的解决方案:

But your whole thing initializes with onload callback to myFunction() and it will never fire with that setting enabled. You have two possible solutions:

• 如果您不想在Fiddle配置中进行任何更改，则需要从body标记中删除onload并将myFunction()更改为自调用功能:

• if you don't want to change anything in Fiddle configuration, than you need to remove onload from the body tag and change myFunction() into self-invoking function:

(function () { **body of the function** }())

或仅编辑Fiddle设置(将加载类型"更改为无环绕-底部"):

or just edit the Fiddle settings (change Load type to No wrap - Bottom of ):

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