个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
我正在使用 heatmaps.js 库和 Google Maps API 在顶部显示 map 和热图。我已经能够显示 map 以及查询数据库以获得我需要的数据。我遇到的问题是让热图显示。我收到以下两个错误:
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>
帮助将不胜感激。谢谢!
最佳答案
一旦加载 Google map 脚本，您就会调用 initMap() 回调，这可能是在加载 Heatmap.js 库之前。同步加载 Google map 并添加一个 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>
关于javascript - Heatmaps.js 未捕获的 ReferenceError，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39181254/
24
4
0
多个 ChildException catch block 和一个 Exception catch block 之间哪个更好？ 更好，我的意思是以良好的实践方式。 举例说明: public stati
我正在尝试将脱机计算机记录在文本文件中，以便以后可以再次运行它们。似乎没有被记录或捕获。 function Get-ComputerNameChange { [CmdletBinding()]
我正在将 Scala 'try/catch' 测试代码转换为使用 'intercept' 有没有我不应该使用“拦截”的场景？使用 'intercept' 而不是 'try/catch' 的唯一好处是简
我对erlang很陌生，我正在尝试使用基本的try/catch语句来工作。我正在使用Webmachine处理一些请求，我真正想做的就是解析一些JSON数据并将其返回。如果JSON数据无效，我只想返回一
我不知道如何捕获删除按键。我发现在 ASCII 代码表中，它位于 127 位，但是 if (Key = #127) then 却无济于事。 然后我检查了 VK_DELETE 的值，它是 47。尝试使用
我很少在失败时对数据库查询使用唯一的错误消息 我经常使用简短的标准消息，例如“数据库错误/失败。请与网站管理员联系”或类似的消息。或自动发送给我 我正在寻找一种在PDO中全局设置一次try {}和ca
我有一个变量CompletableFuture completableFuture 。我希望能够使用任何类型的对象来完成它。例如:completableFuture.complete(new Stri
我认为这是基本的东西，但我不知道该怎么做。为什么我得到 IOException never throw in body of相应的 try 语句 public static void main(Str
我在此代码中遇到 JSON 异常: JSONObject jObject = new JSONObject(JSONString); pontosUsuario.setIdUsuari
我正在尝试打印出用单引号括起来的文本。 /bin/bash -lc '/home/CASPER_REPORTS/scripts/CASPER_gen_report.sh CASPER_1' /bin/
我这里遇到了一点问题。我想弄清楚如何捕获 IllegalArgumentException。对于我的程序，如果用户输入负整数，程序应该捕获 IllegalArgumentException 并询问用户
我无法理解 EJBTransactionRolledbackException。 我有实体: @Entity public class MyEntity { @Id @Generate
对于我给自己提出的以下挑战，如果社区的经验给我任何建议，我将不胜感激 - 即，这里有任何关于最佳方法/方向的指示吗？ 要求 允许收集/实时监控从用户 Windows PC 到一组特定 IP 地址(或
我想在我的 ABAP 代码中捕获并处理 SAPSQL_DATA_LOSS。 我试过这个: try. SELECT * FROM (rtab_name) AS rtab
我知道捕获错误不是一个好的做法，但在这种情况下，这样做很重要。我正在尝试运行一个包含游戏一部分的 jar，但它给了我一个 unsatisfiedlink 错误，但这是有趣的部分:我正在使用这段代码:
我有一个表单页面，当我保存它时，它会覆盖数据库。表单页面中有一个文本框，允许用户输入 4000 个字符，但如果用户输入的字符超过此值，则会出现以下错误: ERROR 15:54:05 Abstrac
我想知道在python中绑定(bind)键的最简单方法 例如，默认的 python 控制台窗口出现并等待，然后在 psuedo -> if key "Y" is pressed: print (
下面是别人写的类。 我面临的问题是，当它进入parse method时与 null as the rawString ，它正在扔NumberFormatException 。 所以我想做的是，我应该捕
我有一个简单的脚本，可以捕获所有鼠标单击，除非您单击实际有效的内容。链接、Flash 视频等。我如何调整它，以便无论用户点击什么，在视频加载、新页面加载等之前，它都会发送我构建的简单 GET 请求？
我有一个带有一些选择列表的表单，当选择某些值时，这些列表将显示/隐藏更多输入字段。 问题是大多数用户都是数据输入人员，因此他们在输入数据时大量使用键盘，并且选择列表的 change 事件仅在焦点离开输
我是一名优秀的程序员,十分优秀！