Question

我的控制器中有这段代码

$scope.initMap = function() {
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8
    };      
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

$timeout(function(){$scope.initMap();}, 1); //This works
//$scope.initMap(); //Doing it like this causes the crash

使用$ timeout行可以很好地初始化地图，但使用底线Angular会从缩小的库中的某处抛出错误a is null。

我在HTML

中包含我的控制器上方的Google Maps js文件

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKey& sensor=false"></script>
<div class="row" ng-controller="VenuesCtrl">

我认为它与$ timeout函数有关，而不需要等待1毫秒，但我无法弄明白。我需要$ timeout还是可以在没有它的情况下使我的代码工作？

Answer 1

这是因为Google在渲染map-canvas元素之前尝试使用id DOM元素。我会创建指令并从那里调用Google Map构造函数

我认为即使使用$timeout 0也可以。

{$ 1}}包裹的函数在执行$ timeout调用后的每一段代码后执行。

为什么会这样？

使用超时，您只需降低执行优先级。这是一个告诉浏览器在完成其他工作并且浏览器不忙的情况下尽快运行它的技巧。

你可以google足够的示例和演示如何使用指令编写Google Map构造函数。我用自己的。

以下是相关代码：

<强> HTML

$timeout

<强>指令

 <map-directive id="map_canvas" >                    
 </map-directive>

如果没有从$ timeout内部运行，函数会抛出错误

1 个答案: