AngularJS - 无法加载多个Google地图

Question

我正在开发一个app（在我的本地机器中），它在手风琴中显示各种位置（大小不一的数组）。我正在使用Angular UI Bootstrap中的手风琴和分页指令以及Angular Google Maps中基于Google Maps JS API的指令。

我有一个问题，有时地图会在我点击的第一个项目中加载，然后我点击手风琴中的另一个项目并且地图不会加载。几分钟后，我将刷新浏览器，然后点击相同的项目，地图就会加载。然后，如果我在分页中转到另一页，则不会在那里显示地图。正如你在我的代码中看到的那样，当我点击手风琴中的一个项目时，我只调用地图，而不是在加载项目时。如果位置数组的大小很大，我不希望立即加载很多地图。

以下a plunker演示了此问题，此处为a fiddle。

以下是上面链接的示例中的一些代码，我认为这对代码很重要：

HTML正文

<accordion close-others="oneAtATime">
    <accordion-group is-open="status.open" ng-repeat="location in locations | startFrom: (currentPage-1)*5| limitTo: 5">
        <accordion-heading >
            <strong get-map-dir location-index={{$index}}>Location</strong> - {{location.address1}}
        </accordion-heading>
        <div id="branch_map" class="" ng-show="showMap ">
            <ui-gmap-google-map center='location.mapInfo.map.center' zoom='location.mapInfo.map.zoom'>
                <ui-gmap-marker coords="location.mapInfo.marker.coords" options="location.mapInfo.marker.options" idkey="location.mapInfo.marker.id">
                    <ui-gmap-window ng-cloak closeClick="closeClick()">
                    </ui-gmap-window>
                </ui-gmap-marker>
            </ui-gmap-google-map>
        </div>
    </accordion-group>

    <pagination total-items="locations.length" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()" ng-hide="locations.length < itemsPerPage"></pagination>
</accordion>

JS（部分）

  .factory('anotherService', function() {
    //getMap using google-maps directive from angularjs-ui
    var getMap = function(locationObj, outerCallBack) {
      console.info('get map');
      var mapInfo = {};
      var address = locationObj.address1;
      var zoom = 16;
      var geocoder = new google.maps.Geocoder();
      console.log(locationObj);

      geocoder.geocode({
        "address": address, //required
        "region": 'CA' //CA for canada
      }, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK && results.length > 0) {

          var location = results[0].geometry.location,
            lat = location.lat(),
            lng = location.lng();

          mapInfo.map = {
            center: {
              latitude: lat,
              longitude: lng
            },
            zoom: zoom
          };

          mapInfo.marker = {
            id: 0,
            coords: {
              latitude: lat,
              longitude: lng
            },
            options: {
              title: address
            }

          };
          outerCallBack({
            success: true,
            mapInfo: mapInfo
          });

        } else if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
          console.info("Geocoder was sucessful but has no results");
          console.info("address =" + address);
          return;
        } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
          console.error("You are over your query limit");
          console.info("address =" + address);
          return;
        } else if (status === google.maps.GeocoderStatus.REQUEST_DENIED) {
          console.error("Your request has been denied by Geocoder");
          return;
        } else if (status === google.maps.GeocoderStatus.INVALID_REQUEST) {
          console.error("Invalid Geocoder request");
          return;
        } else {
          console.error("Google Maps in Ctrl failed");
          console.error("address  =" + address);
          return;
        }

      });


    };

    var anotherService = {
      getMap: getMap
    };
    return anotherService;
  })

.directive('fetchMap', function($timeout, anotherService) {
  return {
    restrict: 'A',

    link: function(scope, elem, attrs) {

      console.log("get map dir");
      console.log(scope);
      console.log(elem);
      console.log(attrs);
      elem.bind('click', function(event) {
        //   console.clear();
        console.log("You clicked on me");
        console.log(scope.locations[attrs.locationIndex].mapInfo);

        if (angular.isUndefined(scope.locations[attrs.locationIndex].mapInfo)) {
          anotherService.getMap(scope.locations[attrs.locationIndex], function(callBackfunc) {
            console.info("Getting maps");
            //  scope.showPreloader = false;
            scope.locations[attrs.locationIndex].mapInfo = callBackfunc.mapInfo;
            $timeout(function() {
              scope.showMap = true;
            }, 2000);

          });
        }

      });
    }
  };
})