Firebase & Google map - читайте данные и создавайте маркеры. Как читать объект?

Question

Firebase & Google map - читайте данные и создавайте маркеры. Как читать объект?

1

Я разрабатываю заявку, которая заключается в поставках крупногабаритных отходов, где каждый гражданин может информировать власти о месте их сбора.

Данные (адреса и координаты) хранятся в firebase, и я работаю над отображением маркеров на карте google.

Вот код:

 jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    markers: findMarkers();

    console.log(markers);
    console.log(markers.length);

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +  
        '<p>' + 'adresse' +'</p>' +        '</div>'],
    ]; 

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1].lat(), markers[i][1].lng());
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
    }
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });    
}
function findMarkers(){

  markers = [];

  var data = firebase.database();

  var dataRef = firebase.database().ref("signalement/");
   dataRef.on("child_added", function(data) {
        var key = data.key;
        const signalement = data.val();
        const adresse = signalement.adresse;
        const coordonnees = signalement.coordonnees;
        var marker = [adresse, coordonnees];
        markers.push( marker );
  });

   // Multiple Markers
   return markers;

}

 </script>
 </head>
 <body>
<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>
 </html>

Проблема возникает из console.log(markers.length); которая равна 0! Пока предыдущий console.log(markers); показывает объект.

Может быть, синтаксическая ошибка маркера var? Тем не мение. Кто-нибудь, кто поможет мне в этом деле?

Спасибо

Eugénie Laigle 12 июнь 2017, в 22:18

Источник

Теги:

javascript

firebase

google-maps

firebase-realtime-database

1 ответ

Ещё вопросы

rahul · Answer 1 · 2017-08-18T14-07-00.000Z

Похоже, проблема связана с обратным вызовом данных firebase. Поскольку вы настроили обратный вызов для google map api callback=initialize данные маркера, он не готов к работе с firebase к моменту выполнения этой функции.

Я бы предпочел сделать что-то подобное (имея в виду, что обратный вызов firebase занимает больше времени, чем загружается графический файл google, и карта имеет зависимость от данных из firebase).

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?&callback=findMarkers";
    document.body.appendChild(script);
});

function initialize(markers) {
   var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

   // Display a map on the page
   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
   map.setTilt(45);

   console.log(markers);
   console.log(markers.length);

   // Info Window Content
   var infoWindowContent = [
        ['<div class="info_content">' +  
        '<p>' + 'adresse' +'</p>' +        '</div>'],
    ]; 

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1].lat(), markers[i][1].lng());
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));
}
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(14);
    google.maps.event.removeListener(boundsListener);
});    
}

function findMarkers(){

    markers = [];

    var data = firebase.database();

    var dataRef = firebase.database().ref("signalement/");
    dataRef.on("child_added", function(data) {
        var key = data.key;
        const signalement = data.val();
        const adresse = signalement.adresse;
        const coordonnees = signalement.coordonnees;
        var marker = [adresse, coordonnees];
        markers.push( marker );
    });

   // send prepared marker array to map initialize function
    intialize(markers);
}