Google 显示红色块的热图

Question

一些数据正在生成 Google 热图以显示红色块而不是热层。我检查了我的信息，但没有发现任何错误，这是我的代码：

 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));
    }

如果接受的答案没有解决您的问题，请检查以确保您传递给热图的所有点都有效。

Google 显示红色块的热图

Google Heat Maps displaying red blocks

javascript

heatmap

google-maps-api-3