谷歌熱圖顯示紅色塊

Question

有些數據正在生成谷歌熱圖來顯示紅色塊而不是加熱層。我檢查了我的信息，但我找不到任何錯誤，這裏是我的代碼：

for (i = 0; i < markers.length; i++) { 
      if (markers[i].lat != " ") { 
       mar.push(markers[i]); 
       var weightedLoc = { 
       location: new google.maps.LatLng(mar[j].lat,mar[j].lon), 
       weight: mar[j].Intensity 
       }; 
       heat.push(weightedLoc); 
       j++; 
      }   
     } 
     var mapOptions = { 
      zoom: 10, 
      center: new google.maps.LatLng(mar[0].lat, mar[0].lon) 
      }; 
      map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); 
     var pointArray = new google.maps.MVCArray(heat); 
      heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: heat 
      }); 
      heatmap.setMap(map); 

我的數據是在這個JSON格式：

[ 
{"lat":"-0.05487","lon":"-78.45286","Intensity":"1.86"}, 
{"lat":"-0.09377","lon":"-78.45136","Intensity":"2"}, 
{"lat":"-0.05489","lon":"-78.45283","Intensity":"0.6"} 
] 

謝謝！

Answer 1

weight必須是數字類型，目前它是一個字符串。

weight: parseFloat(mar[j].Intensity) 

proof of concept fiddle

代碼片段：
通過將它轉換

function initialize() { 
 
    var markers = [{ 
 
    "lat": "-0.05487", 
 
    "lon": "-78.45286", 
 
    "Intensity": "1.86" 
 
    }, { 
 
    "lat": "-0.09377", 
 
    "lon": "-78.45136", 
 
    "Intensity": "2" 
 
    }, { 
 
    "lat": "-0.05489", 
 
    "lon": "-78.45283", 
 
    "Intensity": "0.6" 
 
    }]; 
 
    var heat = []; 
 
    for (i = 0; i < markers.length; i++) { 
 
    if (markers[i].lat != " ") { 
 
     // mar.push(markers[i]); 
 
     var weightedLoc = { 
 
     location: new google.maps.LatLng(markers[i].lat, markers[i].lon), 
 
     weight: parseFloat(markers[i].Intensity) 
 
     }; 
 
     heat.push(weightedLoc); 
 
     // j++; 
 
    } 
 
    } 
 
    var mapOptions = { 
 
    zoom: 12, 
 
    center: new google.maps.LatLng(markers[0].lat, markers[0].lon) 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); 
 
    var pointArray = new google.maps.MVCArray(heat); 
 
    heatmap = new google.maps.visualization.HeatmapLayer({ 
 
    data: heat 
 
    }); 
 
    heatmap.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#dvMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script> 
 
<div id="dvMap"></div>

Answer 2

當我遇到過這個問題，那是因爲我不小心路過空小號將值轉入LatLng構造函數。

見下文：

for (i = 0; i < coords.length; i++) { 
    var lat = coords[i] 
    var long = coords[++i] 

    points.push(new google.maps.LatLng(lat, long)); //<-- no checks on lat, long 
} 

// heatmap layer 
heatmap = new google.maps.visualization.HeatmapLayer({ 
    data: points, 
    map: map 
}); 

我發現有對lat或long已空的潛力，所以我提出了以下變化：

if (!lat.isEmpty() && !long.isEmpty()) { 
     points.push(new google.maps.LatLng(lat, long)); 
    } 

如果接受的答案沒有解決你的問題，檢查以確保你傳遞給熱圖的所有點都是有效的。