AngularJS、谷歌地图和 InfoWindows答案

【问题标题】：AngularJS, Google Maps and InfoWindowsAngularJS、谷歌地图和 InfoWindows
【发布时间】：2013-01-07 14:13:59
【问题描述】：

当用户单击地图上的标记或用户单击位置列表中的位置时，我试图打开一个信息窗口。我遇到的问题是我收到 $apply 已经在进行中的错误。该应用程序仍然可以正常工作，但根据文档，如果我看到这个错误，我做错了什么。这是我正在处理的两段代码。

第一个函数将标记放置在地图上并响应点击标记的点击事件。

var placeMarker = function(center) {
            var marker = new google.maps.Marker({
                map : map,
                position : new google.maps.LatLng(center.location.latitude, center.location.longitude)
            });

            var infoWindow = new google.maps.InfoWindow();

            marker.center = center;
            $scope.markers.push(marker);

            google.maps.event.addListener(marker, "click", function() {
                if ($scope.openInfoWindow) {
                    $scope.openInfoWindow.close();
                }

                $scope.center = marker.center;

                if (!$scope.compiled) {
                    var content = '<div id="infowindow_content" ng-include src="\'/infowindow.html\'"></div>';
                    $scope.compiled = $compile(content)($scope);
                }

                $scope.$apply();

                infoWindow.setContent($scope.compiled[0].innerHTML);
                infoWindow.open(map, marker);

                $scope.openInfoWindow = infoWindow;
            });
};

这里的第二个函数是接受来自应用程序中其他地方的事件并将谷歌地图点击事件发送到我要打开的标记。

$scope.$on("app:ResultListSelection", function(event, providerNumber) {
            for (var i = 0, length = $scope.markers.length; i < length; i += 1) {
                var center = $scope.markers[i].center;

                if (providerNumber === center.providerNo) {
                    google.maps.event.trigger($scope.markers[i], "click");
                    break;
                }
            }
        });

当我在标记上触发谷歌地图点击事件时，会发生 $apply already in progress 错误。

有人知道我做错了什么吗？

【问题讨论】：

你是如何调用函数placeMarker的？如果您注释掉您的 $scope.$apply() 行，错误会消失并且您的应用程序仍然可以工作吗？当您在 Angular 的“内部”调用 $apply() 时会发生该错误。换句话说，Angular 已经在$digest loop 中——参见“运行时”部分中的图片。所以 Angular 已经在 $apply 里面了。
placeMarker 在我收到来自 $rootScope 的事件时调用，该事件传递了我在地图上放置标记所需的所有信息。如果我注释掉 $scope.$apply()，我不会收到错误但我的 infoWindow 不会显示。我将查看“运行时”中的图片，看看是否可以为我解决问题。

标签： javascript google-maps-api-3 angularjs google-maps-markers

【解决方案1】：

我知道可能有更好的方法来做到这一点，但我最终将 underscore.js 添加到我的项目中，并在传递数据的同时使用下划线编译模板。

var template = _.template($("#infoWindowTmpl").html()),
    compiled = template($scope);

var infoWindow = new google.maps.InfoWindow({
    content : compiled
});

【讨论】：