Загрузите данные из базы данных Firebase и поместите на маркер карты, используя JavaScript

user1801745 спросил: 14 ноября 2017 в 06:35 в: javascript

Я пытаюсь прочитать свою базу данных в Firebase, но ничего не происходит.

Моя база данных очень простая, просто узел gps и внутри него больше двух узлов: lat и lng В настоящее время я использую JavaScript.

Все сценарии загружаются в заголовок как firebase.js, firebase-database.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>

0 ответов