問題描述

我正在使用這個(gè)非常好的指南將標(biāo)記從 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/

問題是，使用這些代碼片段，我在控制臺中記錄并返回了所有數(shù)據(jù)，但地圖本身上沒有出現(xiàn)任何點(diǎn).

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 問題.不好意思，還在學(xué)習(xí).

This is probably some really basic JavaScript issue that i'm not able to see. Sorry, still learning.

這是一個(gè) jfiddle，鏈接到帶有一個(gè)標(biāo)記點(diǎn)??的演示表

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

這應(yīng)該在基本地圖上增加一個(gè)點(diǎn).現(xiàn)在實(shí)際上地圖根本沒有渲染，也沒有顯示任何標(biāo)記.我在使地圖顯示為空白的代碼中找不到任何問題，但可能存在一些問題.

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 的標(biāo)記已記錄在控制臺中，我懷疑我的代碼中缺少與真正基本的 javascript 函數(shù)/循環(huán)/草率語法有關(guān)的內(nèi)容.

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) 部分添加到我擁有的地圖中，該地圖具有相同的底圖鏈接，渲染正常.添加它仍然會留下地圖渲染，但沒有出現(xiàn)任何標(biāo)記.同樣，gsheets 被加載為對象數(shù)組.

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, 

上面一行需要改成

callback: addPoints,

另外，需要調(diào)用初始化函數(shù)并將位置設(shè)置為絕對位置.感謝您在下面標(biāo)記為正確的答案中的工作小提琴.

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

推薦答案

修復(fù)

• 嘗試設(shè)置地圖位置絕對
• 調(diào)用init()函數(shù)

工作小提琴

這篇關(guān)于如何使用 tabletop.js 將標(biāo)記添加到傳單地圖?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！