javascript - 从 Firebase JavaScript 检索数据

Question

我正在尝试开发一个网络应用程序，允许用户在 map 上发布注释(标记)以供其他人阅读。它基本上是在 map 上放置由主题和消息组成的标记。通过单击 map 上的标记即可访问它。

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

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

知道可能是什么问题吗？我在下面发布了 map 和 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);
});

Answer 1

从数据库中检索纬度和经度:

firebase.database().ref().child("markers").on('value').then(function(snapshot) {
    snapshot.forEach(function(child) {
        var childData = child.val();
        var latitudes=child.val().latitude;
        var longitudes=child.val().longitude;
    });
});

假设数据库是这样的:

markers
   pushid
       subject: subject
       message: message
       latitude: lat
       longitude: lon