未捕获的引用错误

Heatmaps.js Uncaught ReferenceError

本文关键字：引用 错误      更新时间：2023-09-26

我使用heatmaps.js库和Google Maps API在顶部显示地图和热图。我已经能够显示地图以及查询数据库，以获得我需要的数据。我遇到的问题是让热图显示。我得到以下两个错误:

gmaps-heatmap.js:27 Uncaught ReferenceError: google is not defined

HeatMapsTest.php:41 Uncaught ReferenceError: HeatmapOverlay is not defined

第一个错误发生在库本身，第二个错误发生在下面的代码中:

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

帮助将是非常感激的。谢谢!

你调用initMap()回调，只要谷歌地图脚本加载，这可能是在Heatmap.js库加载之前。同步加载Google地图，并添加一个DOM加载的事件监听器，以便在所有脚本加载后调用initMap()函数。

所以替换这个:

<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>
与这个:

<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>
相关文章：