google heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined

Question

我正在做一个项目，我有一个 JSON 看起来像这样

 [
    {               
        "lat": 53.1522756706757,
        "lon": -0.487157731632087,
        "size": 63,
        "field": "TestField",
        "variety": "TestVariety",
        "count": 1
    }
]

这将有其他人的位置和计数值。使用以下代码时，我不断收到上述错误。

    let map;
let testField = new google.maps.LatLng(53.150, -0.488);

let options = {
    zoom: 6,
    center: testField,
    mapTypeId: 'satellite',
};
function createMap(data) {
    let mapElement = document.getElementById('map');
    let geometry, weighted, count, heatData;
    let heatmap, points;
    map = new google.maps.Map(mapElement, options);

    heatData = [];
    for (var i = 0; i < data.length; i++) {
        geometry = data[i];
        weighted = {};
        count = data[i].count;
        weighted.location = new google.maps.LatLng(
              data.lat,
              data.lon);
        weighted.weight = count
        heatData.push(weighted);
    }

    points = new google.maps.MVCArray(heatData);
    console.log(data);   

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: points,
        opacity: 0.9,
        radius: 20
    });

    heatmap.setMap(map);
}

    $(function () {
      $.ajax({
          type: "GET",
          url: "field_example.json",
          dataType: "json",
          success: createMap
      });
    });

这里有些事情我不太明白，非常感谢您的帮助。

Answer 1

您收到错误消息：TypeError: Cannot read property 'NaN' of undefined 因为 data.lat 和 data.lon 未定义。将 data.lat 更改为 geometry.lat 并将 data.lon 更改为 `geometry.lon（或使用 data[i] 而不是 data）修复了该问题。

for (var i = 0; i < data.length; i++) {
   var weighted = {};
   count = data[i].count;
   weighted.location = new google.maps.LatLng(
     data[i].lat,
     data[i].lon);
   weighted.weight = count
   heatData.push(weighted);
}
heatmap = new google.maps.visualization.HeatmapLayer({
   data: heatData
});

proof of concept fiddle

代码片段：

// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">

var map, heatmap;

function initMap() {
  let map;
  let testField = new google.maps.LatLng(53.150, -0.488);

  let options = {
    zoom: 6,
    center: testField,
    mapTypeId: 'satellite',
  };
  var data = [{
    "lat": 53.1522756706757,
    "lon": -0.487157731632087,
    "size": 63,
    "field": "TestField",
    "variety": "TestVariety",
    "count": 1
  }]

  function createMap(data) {
    let mapElement = document.getElementById('map');
    let count, heatData;
    let heatmap, points;
    map = new google.maps.Map(mapElement, options);

    heatData = [];
    console.log(data.length);
    for (var i = 0; i < data.length; i++) {
      var weighted = {};
      count = data[i].count;
      weighted.location = new google.maps.LatLng(
        data[i].lat,
        data[i].lon);
      weighted.weight = count
      heatData.push(weighted);
    }

    points = heatData;
    console.log(points);

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatData
    });

    heatmap.setMap(map);
  }
  createMap(data);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.41&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap">
</script>

google heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined

google heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined

javascript

arrays

json

google-maps

heatmap