Question

我试图在Firebase上读取我的数据库，但没有任何反应。

我的数据库非常简单，只是一个节点gps，其中有两个节点：lat和lng当前我正在使用JavaScript。

所有脚本都在标题上加载为firebase.js，firebase-database.js和firebase-app.js。我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
    <script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.8.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.8.0/firebase-app.js"></script>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>       
        function initMap() {

        var firebase = require("firebase/app");
        require("firebase/auth");
        require("firebase/database");
        var config = {
            apiKey: "AIzaxxxxxxxxxxxxxxxxxxxxx",
            authDomain: "xxxxxxxxxxxxxx.firebaseapp.com",
            databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
            projectId: "xxxxxxxxxxxx",
            storageBucket: "xxxxxxxxxxxxxx.appspot.com",
            messagingSenderId: "xxxxxxxxxxxxxxxxx"
        };
        firebase.initializeApp(config);

        var latlng = new google.maps.LatLng(9.682796, 21.473007);
        var myOptions = { zoom: 9, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);            
        var myLat = 0;
        var myLng = 0;
        var myLatLngRef = firebase.database().ref('gps');
        myLatLng.on('lat', function (snapshot) {
            myLat = snapshot.val();
            alert(myLat);
        });
        myLatLng.on('lng', function (snapshot) {
            myLng = snapshot.val();
            alert(myLng);
        });
        var myLatLng = { lat: myLat, lng: myLng };
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'gps'
        });
    }               
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaxxxxxxxxxxxx&libraries=visualization&callback=initMap">
</script>

Answer 1

我可以看到一些错误：

您初始化Firebase的方式适用于节点，但不适用于浏览器;如果您转到Firebase console，请选择您的项目，然后在项目概览（欢迎使用Firebase！开始使用此处。）中，第三个按钮将添加Firebase添加到您的网络应用，点击它，按复制并粘贴在您的html中，在您自己的脚本之前。这就是你所需要的一切。
您没有正确的代码可以从数据库中读取，但它已经关闭，但这里有一个如何正确执行此操作的示例：

firebase.database().ref('gps').on('value', function(snapshot) {
    var val = snapshot.val();
    var myLatLng = {
        lat: val.lat,
        lng: val.lng,
    };
});

数据库调用以异步方式运行，这意味着您的代码将运行直到完成，创建一个空标记，并且只有当前处理线程结束时才会调用并运行数据库回调。这意味着您应该等到检索数据后再填充地图。

以下是一个如何将这些内容整合在一起的示例，其中包含我通常使用的基本html模板，以及您的代码交织在一起：

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<style>
    #map {
        height: 100%;
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>
<script>
    // Initialize Firebase
    var config = {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxxxxx.firebaseapp.com",
        databaseURL: "https://xxxxxxxxxxxxxxx.firebaseio.com",
        projectId: "xxxxxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxxxxx.appspot.com",
        messagingSenderId: "xxxxxxxxxxxx"
    };
    firebase.initializeApp(config);
</script>
<div id="map"></div>
<script>
    function initMap() {
        var latlng = new google.maps.LatLng(9.682796, 21.473007);
        var myOptions = { zoom: 9, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        firebase.database().ref('gps').on('value', function() {
            var val = snapshot.val();
            var marker = new google.maps.Marker({
                position: {
                    lat: val.lat,
                    lng: val.lng,
                },
                map: map,
                title: 'gps'
            });
        });
    }
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaxxxxxxxxxxxx&libraries=visualization&callback=initMap">
</script>

Answer 2

您无法在浏览器上使用require。 require是Nodejs的原生。您可以使用require使用某些库，但是，您根本不需要它们，您可以使用：

firebase.initializeApp

马上。查看https://github.com/firebase/firechat＆amp;等工作示例https://github.com/VoloshinS/firebase-crud-example（有点旧）

Answer 3

如果您使用的是Browserify或webpack这样的捆绑包，则可以只需要（）您使用的组件。

如果您只是删除

，您的代码就会有效

var firebase = require("firebase/app");
        require("firebase/auth");
        require("firebase/database");

在这里找到工作的plunker。根据您的需要更改配置：remove require.

从Firebase数据库加载数据并使用JavaScript放置在地图标记上

3 个答案: