자바 스크립트를 사용하여 Firebase에서 히트 맵에 위치 추가

-1

간단한 작업을하려고하지만 자바 스크립트, firebase 및 google 맵 API를 처음 사용합니다. 필자는 firebase 데이터베이스의 데이터 포인트로 맵 (히트 맵이 더 좋을 것이라고 생각합니다)을 만들고 싶습니다.자바 스크립트를 사용하여 Firebase에서 히트 맵에 위치 추가

내가 구글 dev에 웹 사이트 (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>

에서 코드를 사용하고 있습니다하지만이 오류를 받고 있어요 :

내 fireabse 표는 다음과 같다

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

나는 이미 몇 가지 해답을 찾았습니다. h 예, 라이브러리를 제대로로드 할 수 없습니다. 또한 코드가 제대로 작동하는지 알 수 없습니다. 누구든지 수정 제안을 제안 할 수 있습니까? 정말로 그것을 apreciate.

감사합니다.

출처

2017-10-06 Reif

가지고있어'async'와'defer'을. 즉, 스크립트가 끝나면로드가 끝나기 때문에 의존하는 값은 정의되지 않습니다. 해당 특성을 제거하십시오. 또한 그것은 Firebase의 아주 오래된 버전입니다 (구글지도 문서는 구식입니다), 새로운 초기화 프로세스에 대한 Firebase 문서를보십시오. https://firebase.google.com/docs/database/web/start (나중에 작동하도록 업데이트 할 수도 있음) – Sidney

감사합니다. Uncaught TypeError : 속성을 읽을 수 없음 'HeatmapLayer'of undefined' – 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

자바 스크립트를 사용하여 Firebase에서 히트 맵에 위치 추가

답변

관련 문제