使用javascript從Firefoxbase添加地圖熱門地圖

-1

我正在嘗試做一個簡單的任務，但我是JavaScript，firebase和google地圖API的新手。我只想用我的Firebase數據庫中的數據點創建一張地圖（我認爲熱圖會更好）。使用javascript從Firefoxbase添加地圖熱門地圖

我fireabse表如下：

我使用的是從谷歌開發的網站（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>

一個代碼，但我得到這個錯誤：

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

我已經找了一些答案h但是我無法正確加載庫。另外，我不知道代碼是否會起作用。任何人都可以提出修改嗎？真的讚歎它。

謝謝！

來源

2017-10-06 Reif

你有'async'和'defer'。這意味着它會在你的腳本之後加載，所以你依賴的值是未定義的。嘗試刪除這些屬性。此外，這是Firebase的一個非常舊的版本（Google地圖文檔已過時），請參閱Firebase文檔以獲取新的init進程。 https://firebase.google.com/docs/database/web/start（您可能想在更新後通過它進行更新） – Sidney

謝謝！我已經刪除了'asyc'和'defer'，現在我得到這個錯誤：'Uncaught TypeError：無法讀取'undefined'屬性'HeatmapLayer' – Reif

我在你的代碼中看到'HeatmapLayer'的唯一地方是，在底部附近（沒有行號，dammit stackoverflow）。我不確定Google Maps API應該如何使用，您需要參考文檔。 – Sidney

我可以找出問題所在。

出於某種原因，下面的行不起作用。

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

我已替換爲下面的行並將其添加到我的代碼的開頭。

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

此外，我在代碼的末尾添加了以下行。

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

找到完整的腳本如下：在谷歌地圖API的腳本

<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>

來源

2017-10-25 16:49:01 Reif

使用javascript從Firefoxbase添加地圖熱門地圖

回答

相關問題