Как добавить маркеры на карту листовки с tabletop.js? - PullRequest
Новая
       9

Как добавить маркеры на карту листовки с tabletop.js?

0 голосов
/ 13 апреля 2019

Я использую это довольно хорошее руководство для добавления маркеров из листа Google на базовую карту leaflet.js: https://rdrn.me/leaflet-maps-google-sheets/

Проблема в том, что, используя эти фрагменты кода, я получаю все данные, записанные и возвращенные в консоль, но ни одна из точек не отображается на самой карте.

Это, вероятно, какая-то действительно простая проблема JavaScript, которую я не могу увидеть. Извините, все еще учусь.

Вот jfiddle, ссылающийся на демонстрационные листы с одним маркером

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 href="http://openstreetmap.org">OpenStreetMap</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>');
    }
}

Это должно добавить одну точку к базовой карте. Теперь на самом деле карта вообще не отображается, и маркер не отображается. Я не могу найти никаких проблем в коде, заставляющем карту отображаться пустой, но, вероятно, есть некоторые.

Однако маркер из gsheets регистрируется в консоли, я подозреваю, что в моем коде чего-то не хватает, касающегося действительно базовых функций javascript / looping / sloppy синтаксиса.

Также попробовал части init () и addPoints (data, tabletop) к карте, которая была у меня, где карта с той же ссылкой базовой карты, которая отображалась в порядке. Добавление этого все еще оставило рендеринг карты, но никаких маркеров не обнаружилось. Опять же, gsheets был загружен как массив объектов.

Может ли кто-нибудь указать мне на этот, возможно, очень простой вопрос в коде?

редактировать: 

callback: myFunction,

строка выше должна быть изменена на 

callback: addPoints,

Также необходимо вызвать функцию инициализации и установить абсолютное положение. Спасибо за работающую скрипку в ответе, помеченную как правильную ниже.

1 Ответ

1 голос
/ 13 апреля 2019

Исправления

  • Попробуйте установить положение на карте absolute
  • вызов функции init()

Рабочая скрипка

...