Question

大家好，我是前辈开发的绝对新手，这是我第一次使用像AngularJS这样的东西，我认为这真的很难，而且我对它的运作方式并不是很清楚。我正在开发一个旨在可视化Google Map上一批坐标的项目。我已经在服务器端构建了相应的API，它工作正常。

我在我的项目中使用ng-map，以下是我的main.html代码的第一个版本：

<div class="screen-wrapper" id="map-wrapper">
    <div map-lazy-load="https://maps.google.com/maps/api/js">
      <ng-map center="37.782551, -122.445368" zoom="3" disable-default-u-i="true">
        <heatmap-layer id="foo" data="dummyData"></heatmap>
      </ng-map>
    </div>
</div>

上面的dummyData是外部JS文件中的硬编码数组，我原本认为这是不必要的，但后来当我试图从地图中获取heatmapLayer时，我发现这非常重要。如果没有此属性，我无法在控制器中获取heatmapLayer。这有点奇怪，但我不知道为什么会这样。

下面是我的main.controller.js：

(function() {
  'use strict';

  angular
    .module('webapp')
    .controller('MainController', MainController);

  /** @ngInject */
  function MainController(NgMap, $scope, $http) {
    var resp = $http.get('url.to.api')
      .then(function(result) {
        return result.data;
      });

    var incidentData = []
    var extractor = Promise.resolve(resp).then(function(data) {
      for (var i = 0; i < data.length; i++) {
        var lat = data[i]["lat"];
        var lon = data[i]["lon"];
        incidentData.push(new google.maps.LatLng(lat,lon));
      }
    }).then(function() {
      var incidentArray = new google.maps.MVCArray(incidentData);

      var heatMapLayer = new google.maps.visualization.HeatmapLayer({
        data: incidentArray,
        radius: 20
      });

      var heatmap;
      $scope.$on('mapInitialized', function(event, map) {
        heatMapLayer.setMap(map.instance);
      });
    });
  }
})();

我上面要做的是做一个HTTP请求来获得纬度和经度。因为它是＆＃34; Promise＆＃34;的格式，我必须提取它们并将它放入一个数组中。一切似乎对我来说都没问题，但它根本不起作用。界面仅显示“硬编码”＆＃39;可视化但不是新的heatMapLayer。

有人可以建议解决我上面提到的问题的方向/解决方案吗？谢谢大家和StackOverflow。

更新在Daniel的建议之后，我对我的代码进行了以下修改。

在main.controller.js中，我更改了代码段：

  $scope.$on('mapInitialized', function(event, map) {
    heatMapLayer.setMap(map.instance);
  });

为：

  $scope.$apply(function() {
      $scope.$on('mapInitialized', function(event, map) {
        heatMapLayer.setMap(map.instance);
      });
  });

再次感谢丹尼尔！

Answer 1

你可能绕过角度的消化周期。这意味着您的更改已经完成，但它们尚未显示。

Angular会自动跟踪所有更改，在更改内容时更新视图。无论何时手动更改某些内容，而不是通过角度跟踪（例如，通过ng-bind跟踪，或{{}}中的变量），您需要调用范围。$ apply（）以手动触发摘要周期。通常情况下，当角度自动执行此操作时，您甚至不会注意到（或需要知道）。例如$ http也将照顾到这一点。

然而，这里

var resp = $http.get('url.to.api')
  .then(function(result) {
    return result.data;
  });

我怀疑范围。$ digest（）在回调后已被调用（当时你还没有改变任何东西）。

var extractor = Promise.resolve(resp).then(function(data) {

在你的第二个.then（）回调中，你进行了更改，但它们将不再显示。

我建议将下面的代码放到第一个.then（）回调中。如果无法做到这一点，则必须在完成更改后手动调用范围。$ apply（）。

使用ng-map的AngularJS实现动态热图可视化

1 个答案: