Question

我刚接触Firebase，我想从所有具有相同名称（特别是“ user，lat，lng”）的孩子那里获取数据，并将其放在地图上的位置。我还想知道添加另一张表后是否有一种检索数据的方法。这是JSON：

{
  "heartbeat" : {
    "-LjiK_rXySmlqlOFdQos" : {
      "-LjiK_s6zEovrd_yu8nA" : {
        "date" : "Jul-14-2019",
        "lat" : 14.6668004,
        "lng" : 121.1028933,
        "time" : "10:36:06",
        "user" : "Test User"
      },
      "-LjiOGsotaiAGzUpW8L7" : {
        "date" : "Jul-14-2019",
        "lat" : 14.6668004,
        "lng" : 121.1028933,
        "time" : "10:52:12",
        "user" : "Test User"
      },
      "-LjiRSK0yM7cbJL1w3lI" : {
        "date" : "Jul-14-2019",
        "lat" : 14.6668004,
        "lng" : 121.1028933,
        "time" : "11:06:06",
        "user" : "Test User"
      },
      "-LjiUtQoYJc2_CC4McIp" : {
        "date" : "Jul-14-2019",
        "lat" : 14.6652018,
        "lng" : 121.1060547,
        "time" : "11:21:07",
        "user" : "Test User"
      }

我正在使用javascript并尝试将其连接到firebase，但是我只能访问根目录，而不能真正实现我想要的目标。

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    </head>

    <body>
        <div id="map"></div>


            <div>
                <span>Online users: </span><span id="users">0</span>
            </div>


        <!-- jQuery CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!-- Firebase -->
        <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
        <script>
           var config = {
                apiKey: "HISNCIHSDNCHINVS",
                authDomain: "HISNCIHSDNCHINVS",
                databaseURL: "HISNCIHSDNCHINVS",
                projectId: "HISNCIHSDNCHINVS",
                storageBucket: "HISNCIHSDNCHINVS",
                messagingSenderId: "HISNCIHSDNCHINVS",

            };
            firebase.initializeApp(config);
        </script>

        <script>
            var users_count = 0;

            // markers array to store all the markers
            var markers = [];
            var map;
            function initMap() { // google map 
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 16,
                   center: new google.maps.LatLng(14.5838, 121.0597),
                    mapTypeId: 'terrain'
                });
            }


            function AddUser(data) {

                var icon = { // user icon
                   /* path: '',*/
                    scale: 1,
                    fillColor: "#000", 
                    fillOpacity: 1,
                    strokeWeight: 1,
                    anchor: new google.maps.Point(0, 5),

                };

                var coordinates = { lat: data.val().lat, lng: data.val().lng };

                var marker = new google.maps.Marker({
                    position: coordinates,
                    icon: icon,
                    map: map
                });

                /* --- On click info ---*/

                    var infowindow = new google.maps.InfoWindow({
                    content: 'Name: ' + data.val().user + '<br>Latitude: ' +  data.val().lat +
                    '<br>Longitude: ' + data.val().lng
                  }); 

                google.maps.event.addListener(marker, 'click', function() {
                  infowindow.open(map,marker);
                });


                markers[data.key] = marker; 
                document.getElementById("users").innerHTML = users_count;
            }

                // I want to connect to all my child. Idk what to do.
        var users_Ref = firebase.database().ref('/heartbeat');


    users_Ref.on('child_added', function (data) {
        users_count++;
        AddUser(data);
    });


    users_Ref.on('child_changed', function (data) {
        markers[data.key].setMap(null);
        AddUser(data);
    });

    users_Ref.on('child_removed', function (data) {
        markers[data.key].setMap(null);
        users_count--;
        document.getElementById("users").innerHTML = users_count;
    });


    </script> 
    https://maps.googleapis.com/maps/api/js?key=INSERT-API-KEY&callback=initMap">
    </script>

</body>

基于我的Firebase，输出应该能够在所有位置上放置标记。非常感谢您的支持！

如何使用Javascript从Firebase中具有相同名称的所有子元素中获取数据？

0 个答案: