問題描述

我正在使用這個非常好的指南將標記從 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/

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

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 問題.不好意思，還在學習.

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

這是一個 jfiddle，鏈接到帶有一個標記點??的演示表

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

這應該在基本地圖上增加一個點.現在實際上地圖根本沒有渲染，也沒有顯示任何標記.我在使地圖顯示為空白的代碼中找不到任何問題，但可能存在一些問題.

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 的標記已記錄在控制臺中，我懷疑我的代碼中缺少與真正基本的 javascript 函數/循環/草率語法有關的內容.

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

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,

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

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

推薦答案

修復

• 嘗試設置地圖位置絕對
• 調用init()函數

工作小提琴

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