Javascript 谷歌地图API热图-功能无法正常工作
我一直在使用谷歌地图API开发热图。热图使用从本地存储的GeoJSON文件导入的数据，我使用找到的文档完成了这项工作。但是，我已经尝试添加文档中的函数（即切换热图、更改梯度等），由于某些原因，它不起作用，映射本身加载了导入的GeoJSON数据，但这些函数似乎不起作用。有人能告诉我为什么这些函数不起作用的正确方向吗？请在下面找到我的HTML。对于这个例子，我使用的是代码中定义的Google股票GeoJSON数据Javascript 谷歌地图API热图-功能无法正常工作,javascript,google-maps,google-api,geojson,heatmap,Javascript,Google Maps,Google Api,Geojson,Heatmap,我一直在使用谷歌地图API开发热图。热图使用从本地存储的GeoJSON文件导入的数据，我使用找到的文档完成了这项工作。但是，我已经尝试添加文档中的函数（即切换热图、更改梯度等），由于某些原因，它不起作用，映射本身加载了导入的GeoJSON数据，但这些函数似乎不起作用。有人能告诉我为什么这些函数不起作用的正确方向吗？请在下面找到我的HTML。对于这个例子，我使用的是代码中定义的Google股票GeoJSON数据 <!DOCTYPE html> <html> <head
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 60px;
left: 5px;
z-index: 5;
background-color: transparent;
padding: 5px;
border: none;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button><br>
<button onclick="changeGradient()">Change gradient</button><br>
<button onclick="changeRadius()">Change radius</button><br>
<button onclick="changeOpacity()">Change opacity</button><br>
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(54.378051, -3.435973),
mapTypeId: 'terrain'
});
var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);
}
function eqfeed_callback(results) {
var heatmapData = [];
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1], coords[0]);
heatmapData.push(latLng);
}
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
dissipating: true,
map: map
});
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
heatmap.set('radius', heatmap.get('radius') ? null : 20);
}
function changeOpacity() {
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization&callback=initMap">
</script>
</body>
</html>
#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#浮动面板{
位置：绝对位置；
顶部：60px；
左：5px；
z指数：5；
背景色：透明；
填充物：5px；
边界：无；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
切换热图
改变梯度
改变半径
更改不透明度
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：新google.maps.LatLng（54.378051，-3.435973），
mapTypeId:'地形'
});
var script=document.createElement（'script'）；
script.src=http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName（'head'）[0].appendChild（脚本）；
}
函数eqfeed_回调（结果）{
var heatmapData=[]；
对于（var i=0；i