Firebase & Google Karte - lese Daten und erstelle Marker. Wie liest man ein Objekt?

Ich entwickle eine Anwendung, die aus sperrigen Abfällen besteht, wo jeder Bürger die Behörden über den Ort informieren kann, an dem sie gesammelt werden sollen.Firebase & Google Karte - lese Daten und erstelle Marker. Wie liest man ein Objekt?

Daten (Adressen und Koordinaten) sind in firebase gespeichert und ich arbeite an der Anzeige von Markern in einer Google-Karte. Hier

ist der Code:

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>

Problem kommt aus dem console.log(markers.length);, die gleich 0! Während die vorherige console.log(markers); das Objekt zeigt.

Vielleicht ein Syntaxfehler von var-Marker? Wie auch immer. Jemand, der mir für diesen Fall hilft?

Dank

Quelle

2017-06-12 Eugénie Laigle

Sieht aus wie das Problem mit dem Feuerbasis Daten Rückruf ist. Da Sie den Rückruf für Google Map API callback=initialize festgelegt haben, sind die Markierungsdaten zum Zeitpunkt der Ausführung der Funktion noch nicht vom Firebase bereit.

Ich würde eher so etwas tun (unter Berücksichtigung, dass Firebase Callback dauert länger als das Google Map-Skript geladen wird & Karte hat Abhängigkeit von den Daten von 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); 
}

Quelle

2017-08-18 15:34:52 rahul

Firebase & Google Karte - lese Daten und erstelle Marker. Wie liest man ein Objekt?

Antwort

Verwandte Themen