javascript - 从文件纬度经度加载到 Google Maps API(不是数组或 MVC 数组错误)

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 6 年前。

我正在尝试重新创建开发者网站 here 上列出的 Google map 热图。在他们的示例中，他们在写入代码的数组中加载多个纬度/经度坐标。

我想从文件加载坐标。我已经搜索并看到了很多这样的例子，但无法让它与这个特定的热图示例一起使用。我不断收到“不是数组或 MVCArray”错误，我觉得我错过了一些简单的东西。

请参阅下面的 loadPoints 和 getPoints 函数。一种是从外部文件加载并给出错误。另一个从数组加载并且工作正常。

<script>

  var map, heatmap, dataarr;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat: 37.775, lng: -122.434},
      mapTypeId: 'roadmap'
    });

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: loadPoints(), // Gives "not an Array or MVCArray" error, but getPoints() works fine
      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);
  }

  function loadJSON(file, callback) {   

      var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");
      xobj.open('GET', file, true);
      xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
              callback(xobj.responseText);
          }
      };
      xobj.send(null);  
  }

  function loadPoints() { 
      loadJSON("data.php", function(response) {
          var data = JSON.parse(response);

          dataarr = []
          for (i = 0; i < data.length; i++) { 
              dataarr.push(new google.maps.LatLng(data.lat, data.lon))
          }
          //return dataarr
          console.log(dataarr)
      });         
  }

  function getPoints() {
    return [
      new google.maps.LatLng(37.782551, -122.445368),
      new google.maps.LatLng(37.782745, -122.444586),
      new google.maps.LatLng(37.782842, -122.443688),
      new google.maps.LatLng(37.782919, -122.442815),
      new google.maps.LatLng(37.782992, -122.442112),
      new google.maps.LatLng(37.783100, -122.441461)
    ];
  }

</script>

Answer 1

这是因为你的文件是异步加载的，但你试图同步设置数据，所以它会是未定义的。您可能需要稍微重新考虑您的结构，但一种解决方案是等到数据加载后再设置热图。或者只是将 initMap 移至异步回调中。 Check this SO question for more info