Question

我正在开发一个包含大量废物的应用程序。每个公民都可以告知当局有关收集地点的信息。

数据（地址和坐标）存放在firebase中，我正在谷歌地图中显示标记。

以下是代码：

 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标记的语法错误？无论如何。有人帮我这个案子吗？

谢谢

Answer 1

看起来问题在于firebase数据回调。由于您已为google map api callback=initialize设置了回调功能，因此在执行该功能时，标记数据尚未从firebase中准备就绪。

我宁愿做这样的事情（请记住，firebase回调的时间比加载的谷歌地图脚本要长，并且地图依赖于来自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);
}

Firebase＆amp;谷歌地图 - 读取数据并创建标记。如何阅读对象？

1 个答案: