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

Question

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

use*_*745 3 javascript google-maps firebase

我正在尝试读取 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jai*_*mez 5

我可以看到一些错误：

您初始化 Firebase 的方式适用于节点，但不适用于浏览器；如果您转到Firebase 控制台，选择您的项目，然后在项目概述中（欢迎使用 Firebase！从这里开始。），第三个按钮显示将 Firebase 添加到您的 Web 应用程序，单击它，按复制，然后将其粘贴到您的 html 中，在您自己的脚本之前。这就是你所需要的。
您没有正确的代码来从数据库中读取数据，它很接近，但这里有一个关于如何正确执行此操作的示例：

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

Run Code Online (Sandbox Code Playgroud)

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

下面是一个示例，说明如何将所有这些内容与我通常使用的基本 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	1851 次
最近记录：	8 年，4 月前