11

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

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

所以我决定使用参数，它使用方法和.control扩充由参数值命名的对象。这是我的指令用法：getGMaprefresh

<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 is not a function”，因为该mapSetup对象没有增加getGMapor refresh。根据我对文档的理解，它似乎应该是。

我使用（Angular 服务）使用几百毫秒的延迟包装了addListener调用，然后它起作用了，因为到那时该对象已经用.$timeoutmapSetupgetGMap

有没有办法避免必须使用$timeout任意延迟来等待control-specified 对象实际被增强？

4

2 回答 2

17

通过我的测试以及我在文档和各种问题评论中阅读的内容，似乎这（等待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. （如果你碰巧给它一个“错误”的数字，我相信返回的承诺有可能永远不会解决。）

于 2014-11-27T22:00:07.907 回答
0

我最终使用了 vanilla JS，让一切工作都没有头疼。Angular 谷歌地图是一个很酷的想法，但至少在我的情况下，问题多于好处。

在 github 和 stackoverflow 上花了一个小时左右后，我意识到建议的解决方案（如https://github.com/angular-ui/angular-google-maps/issues/308）是一个 hack，因为我的任务只是“在地图上显示一些标记并将地图居中”我不想使用黑客。

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

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

于 2015-12-08T18:20:03.190 回答