如何等待Angular Google Maps将getGMap附加到控件对象

Question

我一直在尝试google.maps.Map在由Angular Google Maps库中的ui-gmap-google-map指令创建的对象上设置click事件侦听器.

我需要动态地执行此操作,所以看起来(至少通过我的简短测试)使用指令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服务/承诺(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');
    });

所以当页面被加载时(这里是小提琴),我得到"TypeError:undefined不是一个函数",因为该mapSetup对象没有用getGMap或增加refresh.根据我对文档的理解,它似乎应该是.

我addListener使用$timeout(Angular服务)使用几百毫秒的延迟来包装调用,然后它起作用,因为此时mapSetup对象已被增强getGMap.

有没有办法避免必须使用$timeout任意延迟等待直到指定的control对象实际增加？

Answer 1

通过我的测试以及我在文档和各种问题评论中所阅读的内容,似乎这(等待control对象得到增强)是uiGmapIsReadyAngular Google Maps 中的服务所设计的内容之一.

我目前的理解是uiGmapGoogleMapApi应该用来等待Google Maps API的异步加载,并且uiGmapIsReady应该用于等待uiGmap*指令及其所需的全部内容(包括control对象扩充)来完成.命名说明了一切.

这是一个新的演示小提琴.这个演示的用法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.(如果你碰巧给它一个"错误的"号码,我相信有一个(遥远的？)可能性,返回的诺言永远不会解决.)