Question

我正在尝试显示谷歌地图和标记。它进展顺利。现在我尝试调用一个方法来动态设置地图的纬度和经度的中心，但是中心未定义为错误，因为地图是在函数返回（或设置）居中的纬度之前绘制的。经度的地图。从而给我们未定义的错误。如何在绘制地图之前完全执行coords（）函数。另一方面。我通过硬编码纬度计数检查原因，然后绘制好地图。我甚至尝试过回调，但无法达到预期的效果。

下面是我的控制器代码（js）和视图（html）。

＆＃13;

var appa = angular.module('appa',['firebase','uiGmapgoogle-maps']);
appa.controller('mainCtrl', function($firebaseObject,$scope) {

              $scope.coords = function(){
                var ref =  firebase.database().ref();
                var latArray = [];
                var lngArray = [];
                var cenlat;
                var cenlng;
                  var marker = [];
                ref.once("value")
                .then(function(snapshot)
                {
                snapshot.forEach(function(child)
                {

                  latArray.push(child.child("Lat").val());
                  console.log(child.child("Lat").val());
                  lngArray.push(child.child("Long").val());
                  var mark = {
                  id: child.child("Id").val(),
                  coords: {
                  latitude: child.child("Lat").val(),
                  longitude: child.child("Long").val()
                  },
                  options: { title: child.child("Alt").val() }
                  };
                  marker.push(mark);
                });

                   cenlat = (Math.max.apply(Math,latArray)+Math.min.apply(Math,latArray)/2);
                   cenlng = (Math.max.apply(Math,lngArray)+Math.min.apply(Math,lngArray)/2);

                });
                $scope.map.center.latitude = cenlat;
                $scope.map.center.longitude = cenlng;
                };

              $scope.map = {
                center:
                {
                  latitude: 51,
                  longitude: 4
                         },
                 zoom: 2
                      };

                $scope.coords();

   });

＆＃13;

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" >

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF-sQ_g7FJ46HeYo8e4dpVukyDkdE5UXw"></script>
    <script src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
    <script type='text/javascript' src='app.js'></script>
    <style type="text/css">
        html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
        }

        #map_canvas {
            position: relative;
        }

        .angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
</head>

<body ng-app="appa">
    <div id="map_canvas" ng-controller="mainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom">
      <ui-gmap-marker ng-repeat="m in marker" coords="m.coords" options="m.options" idkey="m.id">
           </ui-gmap-marker>
                    </ui-gmap-google-map>
</div>
<!--example-->
</body>

</html>

＆＃13;

Answer 1

一种简单的方法是删除硬编码的$scope.map.center，在$scope.coords函数中创建它，然后将ng-if添加到HTML中：

<ui-gmap-google-map center="map.center" zoom="map.zoom" ng-if="map.center">

现在，在$scope.map.center存在之前，指令才会呈现，这将是异步$scope.coords完成时的。

如何在angularjs控制器中定义执行顺序？

1 个答案: