Firebase和Google地图 - 读取数据并创建标记。如何阅读对象？

我正在开发一个应用程序，这个应用程序包含了庞大的垃圾信息，每个公民都可以通知当局收集这些垃圾的地方。Firebase和Google地图 - 读取数据并创建标记。如何阅读对象？

数据库（地址和坐标）存放在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标记语法错误？不管怎么说，有人帮我解决这个问题吗？

谢谢

来源

2017-06-12 Eugénie Laigle

看起来问题是与firebase数据回调。由于您已经为谷歌地图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); 
}

来源

2017-08-18 15:34:52 rahul

Firebase和Google地图 - 读取数据并创建标记。如何阅读对象？

回答

相关问题