AngularJS：在选项卡中通过 Google Maps API v3 进行地图答案

【问题标题】：AngularJS: map via Google Maps API v3 in a tabAngularJS：在选项卡中通过 Google Maps API v3 进行地图
【发布时间】：2013-01-21 18:04:31
【问题描述】：

我正在尝试创建一个带有标签的页面（使用 AngularJS）。其中一个选项卡中有一张地图（Google Maps API v3）。当地图位于前景选项卡中时，一切似乎都很好。但是，当地图加载到后台选项卡中并且仅在单击选项卡后才可见时，地图被放错位置/被切断，当您尝试使用它进行操作时，它的功能似乎被破坏了。

我已经搜索了解决方案，并发现了这些技巧

google.maps.event.trigger(map, 'resize');
map.setCenter(center);

但它不起作用。你能看看http://jsfiddle.net/n4q7Y/5/，告诉我我错过了什么吗？

谢谢。

【问题讨论】：

标签： javascript google-maps angularjs

【解决方案1】：

在触发resize-事件之前稍等片刻：http://jsfiddle.net/doktormolle/aAeZw/

【讨论】：

很好，谢谢:-) 这个用你的想法更新的小提琴也加载了标记：jsfiddle.net/honzzz/n4q7Y/22
我想问题在于所选属性的更改被 2 方观察到（1. 由 $scope.$watch 和 2. 由 ng-show 强制），但没有办法控制监听器的调用顺序，因为它们是异步调用的。更好的解决方案可能是设置另一个属性来指示地图将被显示并观察该属性以触发地图的调整大小事件：jsfiddle.net/doktormolle/6WxtE
不，不，不！！！为什么人们总是接受这样的废话？计时器是一件坏事！如果太短，那么它不会起作用，如果太长，那么用户会在过期之前看到一些丑陋。正确的设计是等待事件 - 总是！我建议tilesloaded
@Mawg：您的出色建议有一个小缺陷：它不起作用。选择选项卡时不会触发任何地图事件：jsfiddle.net/doktormolle/2MEYq我想知道您如何发表这样的评论并在 1 小时后询问a similar question
@Dr.Molle +1 我很平静，所以让我们尝试找到解决方案，而不是火焰战争。我花了 30 多年的时间来开发 FSM，并且不得不声明（笑）一切都应该是事件驱动的。计时器应该只是作为一个守卫的用户 - 以指示预期的事件尚未到达。我的说法是否有任何错误“如果计时器太短，那么它不会工作，如果太长，那么用户会在它到期之前看到一些丑陋”？因此，我们必须在不久之后寻找一个事件驱动的解决方案（这解释了为什么我问了一个寻求事件（而不是计时器）驱动的解决方案的问题）。

【解决方案2】：

谢谢你 Dr.Molle，如果我可以稍微改进一下，在我的情况下，$timeout 可以完美地完成工作（因为它会等到 $digest 周期结束）

$timeout(function () {
    // in my case
    initializeMap();
    // OR this case:
    google.maps.event.trigger(map, 'resize');                      
}, 1000); // with or without delay

【讨论】：

嘿@Zeev G，它不是没有延迟工作吗？ $timeout without delay 是等待 angular 准备好的技巧。（但谷歌地图可能是异步加载的，所以它可能比角度慢）