我正在尝试在 Firebase 上读取我的数据库，但没有任何反应。
我的数据库非常简单，只有一个节点 gps，里面还有两个节点:lat 和 lng 目前我正在使用 JavaScript .
所有脚本都作为 firebase.js、firebase-database.js 和 firebase-app.js 加载到 header 上。
我的代码:
<!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>
最佳答案
我可以看到一些错误:
您初始化 Firebase 的方式适用于节点，但不适用于浏览器；如果你去Firebase console ，选择您的项目并在项目概述中(欢迎使用 Firebase!从这里开始。)，第三个按钮显示将 Firebase 添加到您的 Web 应用程序，单击它，按复制并将其粘贴到您的 html 中，在您自己的脚本之前。这就是您所需要的。
您没有从数据库中读取的正确代码，它很接近，但这里有一个如何正确执行此操作的示例:
firebase.database().ref('gps').on('value', function(snapshot) {
var val = snapshot.val();
var myLatLng = {
lat: val.lat,
lng: val.lng,
};
});
- 数据库调用异步运行，这意味着您的代码将一直运行到完成，创建一个空标记，并且只有当当前处理线程结束时才会调用和运行数据库回调。这意味着您应该等到数据被检索后再填充您的 map 。
这是一个如何将所有这些放在一起的示例，使用我通常使用的基本 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>
关于javascript - 从 Firebase 数据库加载数据并使用 JavaScript 放置在 map 的标记上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47721547/