谷歌地图API热图 - 功能工作不正常

-1

我一直在使用谷歌地图API开发热图。热图使用从本地存储的GeoJSON文件导入的数据，我使用发现的文档 Here。但是，我试过从文档Here（即切换热图，更改渐变等）添加功能，由于某些原因，它不起作用，地图本身加载导入的GeoJSON数据，但功能似乎不上班。任何人都可以向正确的方向指出为什么这些功能不起作用？请在我的HTML下面找到。在这个例子中，我使用了代码中定义的Google股票GeoJSON数据。谷歌地图API热图 - 功能工作不正常

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

来源

2017-02-14 Connorkirk

toggleHeatmap等功能都不是全局的，他们都在里面eqfeed_callback。将它们移出eqfeed_callback以使其成为全局的。

来源

2017-02-14 10:14:23 user1087079

可否请你提供这个工作的例子吗？出于某种原因，当我尝试它时，它只是打破了地图，谢谢！ – Connorkirk

对不起，我只能指出js语法问题，我无法理解google map api的使用逻辑。你可以阅读更多关于google-map api的文档。 – user1087079

谷歌地图API热图 - 功能工作不正常

回答

相关问题