angularjs - 如何等待 Angular Google Maps 将 getGMap 附加到控制对象

Question

我一直在尝试在 google.maps.Map 上设置单击事件监听器由 ui-gmap-google-map 创建的对象来自 Angular Google Maps library 的指令.

我需要动态执行此操作，因此似乎(至少通过我的简短测试)使用 events ui-gmap-google-map 上的参数指令不起作用(因为它似乎只“读取”一次参数值，但也许我错了)。

所以我决定使用 control参数，它使用方法 getGMap 扩充由参数值命名的对象和 refresh .这是我的指令用法的样子:

<ui-gmap-google-map center="appCtrl.mapSetup.center"
                    zoom="appCtrl.mapSetup.zoom"
                    control="appCtrl.mapSetup">
</ui-gmap-google-map>

最后，我异步加载 Google Maps API，并依赖于 GoogleMapApi服务/ promise (Angular Google Maps 的一部分)以了解我何时可以开始安全地处理 google.maps.Map对象(例如添加事件监听器等)。这是一个看起来像的小例子:

// inside the AppController constructor, see the fiddle linked below
var mapSetup = this.mapSetup;
GoogleMapApi.then(function () {
    google.maps.event.addListener(mapSetup.getGMap(), 'click', function () {
        alert('hello');
    });

因此，当页面加载( here's the fiddle )时，我收到“TypeError: undefined is not a function”，因为 mapSetup对象尚未增加 getGMap或 refresh .根据我对文档的理解，似乎应该是这样。

我包裹了 addListener调用 $timeout (Angular 服务)使用几百毫秒的延迟，然后它工作了，因为 mapSetup那时对象已经增加了 getGMap .

有没有办法避免使用 $timeout以任意延迟等待直到 control - 指定的对象实际上是增强的？

Answer 1

通过我的测试以及我在文档和各种问题评论中阅读的内容，这似乎(等待 control 对象得到增强)是 uiGmapIsReady 的事情之一。 Angular Google Maps 中的服务是专为的。

我目前的理解是uiGmapGoogleMapApi应该用于等待 Google Maps API 和 uiGmapIsReady 的异步加载应该用来等待uiGmap*指令以及它们需要的所有内容(包括 control 对象增强)来完成。命名说明了一切。

这是a new demo fiddle .本演示使用 IsReady :

IsReady.promise().then(function (maps) {
    var map1 = $scope.control.getGMap();
    var map2 = maps[0].map;
    alert(map1 === map2); // true
});

IsReady.promise ( source ) 接受一个可选的整数参数，指示(我很确定) ui-gmap-google-map 的数量您的页面正在使用的指令。默认为 1 . (如果你碰巧给它一个“错误”的数字，我相信有一种(远程？)返回的 promise 永远不会解决的可能性。)