javascript — Heatmaps.js Uncaught ReferenceError

Question

javascript — Heatmaps.js Uncaught ReferenceError

Я использую библиотеку heatmaps.js, а также API Карт Google для отображения карты, а также карту тепла сверху. Я был в состоянии отобразить карту, а также запросить базу данных, чтобы получить данные, которые мне нужны. Проблема, которую я имею, состоит в том, чтобы получить тепловую карту для отображения. Я получаю следующие две ошибки:

gmaps-heatmap.js: 27 Uncaught ReferenceError: Google не определен

HeatMapsTest.php: 41 Uncaught 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>

Помощь будет высоко ценится. Спасибо!

2

api heatmap javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Ты звонишь initMap() обратный вызов, как только загружается скрипт Google Maps, что может быть до загрузки библиотеки 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>

2