Question

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

gmaps-heatmap.js：27未捕获的ReferenceError：谷歌未定义

HeatMapsTest.php：41未捕获的ReferenceError：未定义HeatmapOverlay

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

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

非常感谢帮助。谢谢！

Answer 1

加载Google地图脚本后，您可以立即调用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>

Heatmaps.js未捕获的ReferenceError

1 个答案: