Heatmaps.js Uncaught ReferenceError

메신저 Google지도 API뿐만 아니라 heatmaps.js 라이브러리를 사용하여 히트 맵을 맨 위에 표시 할 수 있습니다. 필자는 필요한 데이터를 얻기 위해 데이터베이스를 쿼리 할뿐만 아니라지도를 표시 할 수있었습니다. 문제는 히트 맵을 표시하는 것입니다. 나는 다음과 같은 두 가지 오류를 얻을 :Heatmaps.js Uncaught ReferenceError

gmaps-heatmap.js : 27 catch되지 않은 오류 ReferenceError : 41 catch되지 않은 ReferenceError가 :

첫 번째 오류가있는 HeatmapOverlay이

을 정의되지 않은 구글은

HeatMapsTest.php을 정의되지 않은 라이브러리 자체 및 두 번째 오류는 아래 코드에서 발생합니다.

<html> 
    <head> 
     <style> 

     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 

     #map-canvas { 
     height: 100%; 
     } 

     </style> 


    </head> 
    <body> 

    <div id="map-canvas"></div> 


<?php 

//parameters for connecting to database 
$servername = ''; 
$username = ''; 
$password = ''; 
$dbname = ""; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 

// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 
echo "Connected successfully <br> "; 

$sql = "SELECT LATITUDE,LONGITUDE FROM `crashes`"; 

$test = $conn->query($sql); 

if ($test == true) { 
echo "Query Worked!"; 
} else { 
echo "Query Did Not Work"; 
} 

try{ 
    $db = $conn; 
     $result = $db->query($sql); 
    while ($row = $result->fetch_array(MYSQLI_ASSOC)) { 
     $data[] = $row; 
     } 
    $db = NULL; 
     $data_json = json_encode($data); 
     /* echo "<br>"; 
     echo $data_json; */ 

     } catch(PDOException $e) { 
      echo '{"error":{"text":'. $e->getMessage() .'}}'; 
     } 

?> 

<script> 

    function initMap() { 

    var myLatlng = new google.maps.LatLng(-37.8, 144.9); 

    var myOptions = { 
    zoom: 8, 
    center: myLatlng 
    }; 

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 

     heatmap = new HeatmapOverlay(map, 
      { 
      // radius should be small ONLY if scaleRadius is true (or small radius is intended) 
      "radius": 17, 
      "maxOpacity": 1, 
      // scales the radius based on map zoom 
      "scaleRadius": false, 
      // if set to false the heatmap uses the global maximum for colorization 
      // if activated: uses the data maximum within the current map boundaries. 
      // (there will always be a red spot with useLocalExtremas true) 
      "useLocalExtrema": true, 
      // which field name in your data represents the lat - default "lat" 
      latField: 'LATITUDE', 
      // which field name in your data represents the lng - default "lng" 
      lngField: 'LONGITUDE', 
      // which field name in your data represents the data value - default "value" 
      valueField: 'value' 
      } 
     ); 


     var testData = { 
      max: 8, 
      data : <?php echo $data_json; ?> 
     }; 

     heatmap.setData(testData); 

    } 

    </script> 


    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"> 
    </script>  
    <script src="heatmap.js-develop/build/heatmap.js"></script> 
    <script src="heatmap.js-develop/plugins/gmaps-heatmap.js"></script> 
    </body> 
</html>

도움을 주시면 감사하겠습니다. 감사!

출처

2016-08-27 stefan96

이 잘못 될 수 있지만 너무 비동기 연기 플래그와 다른 라이브러리를로드하려고 :이

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script> <script src="heatmap.js-develop/build/heatmap.js"></script> <script src="heatmap.js-develop/plugins/gmaps-heatmap.js"></script>

을 :

그래서이를 대체합니다. 히트 맵이로드되기 전에 코드가 실행 된 것으로 생각합니다. 희망이 도움이됩니다. –

흠, 그것을 고쳐 준 것 같습니다 : ( – stefan96

히트 맵 .js 라이브러리가로드되기 전에 Google지도 스크립트가로드되는 즉시 initMap() 콜백으로 전화를 걸 수 있습니다. Google지도를 동 기적으로로드하고 DOM로드 된 이벤트 리스너를 추가하여 모든 스크립트가로드 된 후에 만 initMap() 함수를 호출하십시오.

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>  
<script src="heatmap.js-develop/build/heatmap.js"></script> 
<script src="heatmap.js-develop/plugins/gmaps-heatmap.js"></script> 
<script> 
    document.addEventListener("DOMContentLoaded", function(event) { 
    initMap(); 
    }); 
</script>

출처

2016-09-06 15:14:30 jkondratowicz

heatmap.js 파일이 올바르게로드 되었습니까? 경로에 오타가 없습니까? 다른 오류가 있습니까? 라이브러리의 다른 버전을 구할 수 있습니까? – jkondratowicz

Heatmaps.js Uncaught ReferenceError

답변

관련 문제