Hinzufügen von Orten zu Heatmap von Firebase mit Javascript

-1

Ich versuche, eine einfache Aufgabe zu tun, aber ich bin neu in Javascript, Firebase und Google Maps API. Ich möchte nur eine Karte erstellen (ich denke, dass eine Heatmap besser wäre) mit den Datenpunkten aus meiner Firebase-Datenbank.Hinzufügen von Orten zu Heatmap von Firebase mit Javascript

Mein fireabse Tabelle ist die folgende:

ich einen Code von Google dev Website mit (https://developers.google.com/maps/documentation/javascript/firebase)

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     #map { 
     height: 50%; 
     width: 50%; 
     } 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX 
      &libraries=visualization&callback=initMap"> 
    </script> 
    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script> 
    <div id="map"></div> 


    <script> 

    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 0, lng: 0}, 
      zoom: 3, 
      styles: [{ 
      featureType: 'poi', 
      stylers: [{ visibility: 'off' }] // Turn off points of interest. 
      }, { 
      featureType: 'transit.station', 
      stylers: [{ visibility: 'off' }] // Turn off bus stations, train stations, etc. 
      }], 
      disableDoubleClickZoom: true 
     }); 
     } 



     var heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: [], 
      map: map, 
      radius: 16 
     }); 

     var firebase = new Firebase("https://XXXXXXX.firebaseio.com/"); 
     var places = firebase.child('places'); 

     // Get that click from firebase. 
     places.orderByChild('places').on('child_added', 
     function(snapshot) { 
     var newPosition = snapshot.val(); 
     var point = new google.maps.LatLng(newPosition.lat, newPosition.lng); 
     heatmap.getData().push(point); 
     } 
    ); 




    </script> 


    </body> 
</html>

Aber ich bin immer diese Fehlermeldung:

Uncaught ReferenceError: google is not defined at index.html:44

Ich habe schon einige Antworten gesucht h Hier, aber ich konnte die Bibliothek nicht richtig laden. Außerdem weiß ich nicht, ob der Code funktionieren wird. Kann jemand Änderungen vorschlagen? Wirklich schätzen es.

Danke!

Quelle

2017-10-06 Reif

Sie haben 'async' und' defer' auf dem API-Skript Google Maps. Das bedeutet, dass es nach dem Skript geladen wird. Daher sind die Werte, auf die Sie sich verlassen, nicht definiert. Versuchen Sie, diese Attribute zu entfernen. Auch das ist eine sehr alte Version von Firebase (die Google Maps-Dokumentation ist veraltet), siehe Firebase-Dokumentation für den neuen Init-Prozess. https://firebase.google.com/docs/database/web/start (möchten Sie vielleicht aktualisieren, nachdem es funktioniert hat) – Sidney

Vielen Dank! Ich habe die 'Asyc' und' Defer' entfernt und jetzt bekomme ich diesen Fehler: 'Uncaught TypeError: Kann Eigenschaft 'HeatmapLayer' von undefined nicht lesen – Reif

Der einzige Ort, den ich' HeatmapLayer' in Ihrem Code sehe, ist uh, in der Nähe des Bodens (keine Zeilennummern, verdammt Stackoverflow). Ich bin mir nicht sicher, wie genau das Google Maps-API verwendet werden soll. Sie müssen auf die Dokumentation verweisen. – Sidney

Ich könnte es die Probleme herausfinden.

Aus irgendeinem Grund funktionierte die folgende Zeile nicht.

Ich habe für die Zeile unten ersetzt und es am Anfang meines Codes hinzugefügt.

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=visualization"></script>

Außerdem habe ich die Zeile unten am Ende meines Codes hinzugefügt.

google.maps.event.addDomListener(window, 'load', initMap);

unterhalb der vollständige Skript finden:

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=visualization"></script> 
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script> 
<div id="map"></div> 


<script> 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 0, lng: 0}, 
     zoom: 3, 
     styles: [{ 
     featureType: 'poi', 
     stylers: [{ visibility: 'off' }] // Turn off points of interest. 
     }, { 
     featureType: 'transit.station', 
     stylers: [{ visibility: 'off' }] // Turn off bus stations, train stations, etc. 
     }], 
     disableDoubleClickZoom: true 
    }); 

var heatmap = new google.maps.visualization.HeatmapLayer({ 
    data: [], 
    map: map, 
    radius: 16 
    }); 


var firebase = new Firebase("https://be-safe-anywhere.firebaseio.com/"); 
var places = firebase.child('places'); 

// Get that click from firebase. 
places.orderByChild('places').on('child_added', 
function(snapshot) { 
    var newPosition = snapshot.val(); 
    var point = new google.maps.LatLng(newPosition.lat, newPosition.lng); 
    heatmap.getData().push(point); 
} 
);  


} 







google.maps.event.addDomListener(window, 'load', initMap); 
</script>

Quelle

2017-10-25 16:49:01 Reif

Hinzufügen von Orten zu Heatmap von Firebase mit Javascript

Antwort

Verwandte Themen