與Firebase熱圖協作實時映射不起作用

-1

我試過從this位置的教程。當我到達熱圖部分時，它不再繪製地圖。我想我一定做錯了什麼，但我沒有線索... 當我從圖標中刪除評論的時候：圖像部分我會得到一張地圖，但熱圖部分不起作用。與Firebase熱圖協作實時映射不起作用

我希望有人能幫助我親切的問候蓋伊

// Reference to the Firebase database. 
var firebase = new Firebase("https://adopt-a-portal.firebaseio.com/"); 


function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 0, lng: 0}, 
    zoom: 3 
    }); 

    // Add marker on user click 
    map.addListener('click', function(e) { 
    firebase.push({lat: e.latLng.lat(), lng: e.latLng.lng()}); 
    }); 
    // Create a heatmap. 
    var heatmap = new google.maps.visualization.HeatmapLayer({ 
    data: [], 
    map: map, 
    radius: 8 
    }); 
    firebase.on("child_added", function(snapshot, prevChildKey) { 
    // Get latitude and longitude from Firebase. 
    var newPosition = snapshot.val(); 

    // Create a google.maps.LatLng object for the position of the marker. 
    // A LatLng object literal (as above) could be used, but the heatmap 
    // in the next step requires a google.maps.LatLng object. 
    var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng); 

    // Place a marker at that location. 
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map 
    // icon: image 
    }); 
     heatmap.getData().push(latLng); 
    }); 
}

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

來源

2016-03-18 Guy Forssman

我得到一個JavaScript錯誤與您的代碼：Uncaught TypeError: Cannot read property 'HeatmapLayer' of undefined

你是不是包括visualization library。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o&region=BE&callback=initMap" 
    async defer></script>

應該是（注意添加的「庫=可視化」）：

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o&region=BE&callback=initMap" 
    async defer></script>

proof of concept fiddle

來源

2016-03-18 17:10:30 geocodezip

與Firebase熱圖協作實時映射不起作用

回答

相關問題