使用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添加地图热门地图

回答

相关问题