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

问题描述 投票：2回答：3

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

我的数据库非常简单，只是一个节点gps，里面有两个节点：lat和lng Currenty我正在使用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>

javascript google-maps firebase
3个回答
3
投票

我可以看到一些错误：

  1. 初始化Firebase的方式适用于节点，但不适用于浏览器;如果你去Firebase console，选择你的项目，并在项目概述（欢迎使用Firebase！开始使用此处。），第三个按钮说添加Firebase到你的网络应用程序，点击它，按复制，并将其粘贴到你的HTML，在你自己的脚本之前。这就是你所需要的。
  2. 您没有正确的代码从数据库中读取，它已经关闭但是这里有一个如何正确执行它的示例：
firebase.database().ref('gps').on('value', function(snapshot) {
    var val = snapshot.val();
    var myLatLng = {
        lat: val.lat,
        lng: val.lng,
    };
});
  1. 数据库调用以异步方式运行，这意味着您的代码将运行直到完成，创建一个空标记，并且只有当前处理线程结束时才会调用并运行数据库回调。这意味着您应该等到检索数据后再填充地图。

这是一个如何将这一切放在一起的示例，使用我通常使用的基本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>
0
投票

你不能在浏览器上使用require。 require原产于Nodejs。您可以使用require使用某些库，但是，根本不需要它们，您可以使用：

firebase.initializeApp

马上。查看像https://github.com/firebase/firechat和https://github.com/VoloshinS/firebase-crud-example这样的工作示例（有点旧）

0
投票

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

如果您删除，您的代码将起作用

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.