Angularjs 如何等待谷歌地图将getGMap附加到控件对象

我一直在尝试在

google.maps.Map

对象上设置点击事件监听器，该对象由来自的

ui-gmap-google-Map

指令创建

我需要动态地这样做，所以（至少通过我的简短测试）在

ui-gmap-google-map

指令上使用

events

参数似乎不起作用（因为它似乎只“读取”一次参数值，但可能我错了）

因此我决定使用

control

参数，它使用

getGMap

和

refresh

方法来增加由参数值命名的对象。以下是我的指令用法：

<ui-gmap-google-map center="appCtrl.mapSetup.center"
                    zoom="appCtrl.mapSetup.zoom"
                    control="appCtrl.mapSetup">
</ui-gmap-google-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

（角度服务）打包，然后它工作了，因为

mapSetup

对象在那时已被

getGMap

扩展

---

有没有一种方法可以避免使用带有任意延迟的

$timeout

来等待

控件

指定的对象被实际扩展？

根据我的测试以及我在文档和各种问题注释中读到的内容，这似乎是（等待

控件

对象被扩展）是谷歌地图中的

uiGmapIsReady

服务的设计目标之一

我目前的理解是，

uiGmapGoogleMapApi

应该用来等待googlemapsapi的异步加载，

uiGmapIsReady

应该用来等待

uiGmap*

指令以及它们所需要的所有指令（包括

控制

对象扩展）完成。名字说明了一切

给你。此演示的

用法已就绪

：

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

---

IsReady.promise

（）接受一个可选的整数参数，该参数指示（我很确定）页面正在使用的

ui-gmap-google-map

指令的数量。它默认为

1

。（如果您碰巧给了它一个“错误”的号码，我相信返回的承诺有可能永远无法解决。）

我最终使用了vanilla JS，让所有东西都可以正常工作，而不感到头痛。角度谷歌地图是一个很酷的想法，但至少在我的例子中，问题多于好处

在github和stackoverflow上花了一个小时左右的时间后，我意识到提议的解决方案（比如）是一个非常简单的解决方案，因为我的任务只是“在地图上显示一些标记并将地图居中”，所以我不想使用这种方法

gmaps文档包含了大量的示例（用vanilla JS编写），可以在Angular应用程序中使用，复制+粘贴就完成了

---

再说一次，这是我个人的经历，对你来说可能不一样

这个答案看起来干净多了。更新至正确答案。IsReady现在是uiGmapIsReady，从Google Maps v2.0I开始。我确认传递给

uiGmapIsReady

承诺的整数是页面中的ui-

gmap Google map

指令数。