Google Maps API返回TypeError：无法读取未定义的属性'weight'

Question

我正在尝试使用Google Maps API中的热图，由于未定义权重，因此出现错误。以下是我目前用于尝试渲染地图的代码。它使用PHP从数据库返回一组值，然后将其转换为JSON以在代码中使用：

    <div id="mapcontainer" style="min-height: 500px; height: 100%; min-width: 300px; width: 100%;">
        <div id="map" style="min-height: 500px; height: 100%; min-width: 300px; width: 100%"></div>
    </div>
    <script>
      let map;
      let heatmap = '';
      let classmates = <?= json_encode($mapData->getAllData()) ?>;

      classmates = classmates.map(o => {
        o.location = new google.maps.LatLng(o.lat, o.long)
        return o
      })

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 33, lng: -77},
          mapTypeId: 'hybrid'
        });

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: classmates.map(o => {
              console.log(o.location)
              return o.location
          }),
          radius: 20,
          opacity: 1,
          map: map
        });

        let markers = [];
        for (let i = 0; i < classmates.length; i++) {
          let marker = new google.maps.Marker({
            position: classmates[i].location,
            map: map,
            visible: false,
            html: `<b>${classmates[i].name}</b> <a href="${classmates[i].url}">Go to profile</a>`
          });
          markers[i] = marker;
          google.maps.event.addListener(marker, 'click', function () {
            // where I have dded .html to the marker object.
            infowindow.setContent(this.html);
            infowindow.open(map, this);
          });

        }

        let infowindow = new google.maps.InfoWindow({
          content: 'Some content string'
        });


        google.maps.event.addListener(map, 'zoom_changed', function() {
          let zoom = map.getZoom();
          // iterateover markers and call setVisible
          for (let i = 0; i < classmates.length; i++) {
            markers[i].seVisible(zoom >= 7);
          }
        });
      }

    </script>
    <script async defer
            src='https://maps.googleapis.com/maps/api/js?key=******&libraries=visualization&callback=initMap'>
    </script>

我不确定我缺少什么，但在visualization_impl.js:1中遇到错误：

visualization_impl.js:1 Uncaught (in promise) TypeError: Cannot read property 'weight' of undefined
    at visualization_impl.js:1
    at _.Le.forEach (js?key=******&libraries=visualization&callback=initMap:189)
    at yga (visualization_impl.js:1)
    at R$ (visualization_impl.js:9)
    at U$.<anonymous> (visualization_impl.js:8)
    at ue.j (js?key=******&libraries=visualization&callback=initMap:187)
    at Object._.N.trigger (js?key=******&libraries=visualization&callback=initMap:184)
    at ye (js?key=******&libraries=visualization&callback=initMap:77)
    at U$._.O.bindTo (js?key=******&libraries=visualization&callback=initMap:188)
    at d (visualization_impl.js:13)

我可能会在未声明的位置丢失属性吗？

Answer 1

所以问题在于以下代码不在initMap函数的外部：

classmates = classmates.map(o => {
  o.location = new google.maps.LatLng(o.lat, o.long)
  return o
})

对google.maps.LatLng()的调用被调用为时过早，一旦我将其移入函数内，它便不再引发该错误。现在，请确保客户端更新其帐单资料，以便其正确显示，而不是被错误显示替换。