谷歌地圖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熱圖 - 功能工作不正常

回答

相關問題