javascript - Firebase 和 Google map - 读取数据集并创建标记。如何读取对象？

我正在开发一个应用程序，其中包含大件垃圾信号，每个公民都可以向当局告知收集垃圾的地点。

数据(地址和坐标)已存储到 Firebase 中，我正在研究在 Google map 中显示标记。

代码如下:

 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 标记有语法错误？反正。有人可以帮我处理这个案子吗？

谢谢

最佳答案

看起来问题出在 firebase 数据回调上。由于您已经为 google map api callback=initialize 设置了回调，因此在执行该函数时，Firebase 中的标记数据尚未准备好。

我宁愿做这样的事情(请记住，Firebase 回调需要比加载的 Google map 脚本更长的时间，并且 map 依赖于 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);
}

关于javascript - Firebase 和 Google map - 读取数据集并创建标记。如何读取对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44508045/

javascript - Firebase 和 Google map - 读取数据集并创建标记。如何读取对象？

上一篇：javascript - 翻译 Fancybox-Button

下一篇：javascript - 慢速滚动抖动