从 Firebase JavaScript 检索数据

我正在尝试开发一个 Web 应用程序，它允许用户在地图上张贴注释（标记）供其他人阅读。它基本上是在地图上放置由主题和消息组成的标记。单击地图上的标记可以访问它。

现在我面临着从 Firebase 检索数据的问题。我设法让应用程序将数据发送到 Firebase（地图上标记位置的纬度和经度，以及带有主题本身的消息），但我无法取回信息以便在精确坐标上放置标记。

我遵循了许多 YouTube 教程和在线指南，但除了 Chrome 中的控制台之外，Firebase 数据不会显示在任何地方。

任何线索可能是什么问题？我在下面发布了他的地图和 Firebase 的 JavaScript，以便您可以看到我如何将消息、主题、纬度和经度保存到 Firebase 数据库中。

谢谢

firebase.initializeApp(config);

var note = firebase.database().ref("note");

/*map*/
window.onload = getLocation;
var geo = navigator.geolocation;

function getLocation() {
    if (geo) {
        geo.watchPosition(displayLocation);
    }
    else {
        alert("opps, geolocation API is not supported ");
    }
}

function displayLocation(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    /*diaplays coordinates in the footer of the webapp*/
    var div = document.getElementById( 'location' );
    longText = document.getElementById("longitude")
    if (latitude == latitude)
    {
        div.innerHTML = "X: " + latitude + " Y: " + longitude;
    }
}

/*map*/
var map, infoWindow;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 6,
        disableDefaultUI: true,
    });
    infoWindow = new google.maps.InfoWindow;

    /*gets Navigation, sets the map to current position and posts a marker*/
    /*Shouldn't post a marker, code will be removed later when we learn how 
      to post markers to note locations rather than user locations*/
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
            };
            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            infoWindow.open(map);
            map.setCenter(pos);
            })
            var marker = new google.maps.Marker
            ({
                position: pos,
                map: map
            })   
        }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
        handleLocationError(false, infoWindow, map.getCenter());
    }
}

/*stores Geolocation in local storage to call it later*/
navigator.geolocation.getCurrentPosition(function(p)
{
    localStorage.setItem("latitude", p.coords.latitude);
    localStorage.setItem("longitude", p.coords.longitude);
}, function(e){console.log(e)})

 /*error handler obviously*/
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
        'Error: The Geolocation service failed.' :
        'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
}

/*button firebase function*/
var submitNote = function () {
        var subject = $("#messageSubject").val();
        var message = $("#messageContent").val();
        var lat = localStorage.latitude;
        var lon = localStorage.longitude;

        note.push({
            "subject": subject,
            "message": message,
            "latitude": lat,
            "longitude": lon
    });

};

$(window).load(function () {
    $("#noteForm").submit(submitNote);
});