debugging - 即使定义了类型 "group"，标记也只能添加到类型 "group"错误的图层中

Question

我遇到了一个似乎很明显的错误，但我已经尝试了一切。我肯定错过了什么。我正在使用 Angularjs 和 angular-leaflet-directives 运行 Rails 应用程序。我正在尝试向特定组添加标记。无论我做什么，我都会收到此错误:

[AngularJS - Leaflet]标记只能添加到“组”类型的图层

我知道当覆盖类型不是组时会出现此错误。问题是，就我而言，确实如此!

编辑:这是我重新创建错误的 plunkr: http://plnkr.co/edit/DLCN5RYVr0BheYzTuqkQ?p=preview这是我的代码:

assets/javascript/angular/services/service.js

app.factory('Markers', ["$http", "$q", function($http, $q) {
var Markers = []
var events_markers = []
var stories_markers = []
var defaultIcon =  L.icon({
    iconUrl: 'assets/dot-grey.png',
    iconSize:     [15, 15],
    iconAnchor:   [15, 15],
    popupAnchor:  [-7, -20]
})

// Getting events + stories from rails API
var event_data = $http.get("/api/v1/events.json"),
    story_data = $http.get("/api/v1/stories.json")

// Setting event markers and stories markers
$q.all([event_data, story_data]).then(function(results) {
    var data_stories = results[1].data.stories
    var data_events = results[0].data.event
    for (i=0 ; i < data_stories.length; i++){
        for (j=0; j < data_stories[i].locations.length; j++){
            var lat = data_stories[i].locations[j].latitude
            var lng = data_stories[i].locations[j].longitude
            var title = data_stories[i].title
            var layer = "stories"
            Markers.push({layer: layer, lat:lat, lng:lng, message: title, icon: defaultIcon})
        }
    }
    for (e=0 ; e < data_events.length; e++){
        if (data_events[e].latitude != null){
            var lat = data_events[e].latitude
            var lng = data_events[e].longitude
            var title = data_events[e].name
            var layer = "events"
            Markers.push({layer: layer, lat:lat, lng: lng, message: title, icon: defaultIcon})
        }
    }
    return Markers
});

return {
  markers: Markers
}

}]);

assets/javascript/angular/controllers/MapCtrl.js

app.controller("MapCtrl", ['$scope', "$timeout", "leafletData", "Markers", function($scope, 

$timeout, leafletData, Markers ){
  $scope.isVisible = true;
  $scope.markers = Markers.markers;
  var bounds = {
      northEast:{
        lat: 37.86862005954327,
        lng: -122.12230682373048
      },
      southWest:{
        lat: 37.68436373334184,
        lng: -122.55901336669923
      }
  }

  function setMap($scope, markers, bounds) {
     angular.extend($scope, {
        maxbounds: bounds,
        defaults: {
            scrollWheelZoom: false,
            maxZoom: 14,
            minZoom: 10
        },
        layers: {
            baselayers: {
              mapbox:{
                name: 'Mapbox Litography',
                url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
                type: 'xyz',
                layerParams: {
                  apikey: 'pk.eyJ1IjoibGF1cmVuYmVuaWNob3UiLCJhIjoiQ1BlZGczRSJ9.EVMieITn7lHNi6Ato9wFwg',
                  mapid: 'laurenbenichou.jm96meb6'
                }
              }
            }
         },
        overlays: {
            stories: {
                type: 'group', //Note here that the type is indeed 'group'
                name: 'stories',
                visible: true
            },
            events: {
                type: 'group',
                name: 'events',
                visible: false
            }
        },
        markers: markers
      });
    }

  setMap($scope, $scope.markers, bounds)

  angular.element(document).ready(function () {
      function toggle(){$scope.isVisible = !$scope.isVisible;}
      $timeout(toggle, 1000);
  });
}])

assets/javascript/templates/map.html

<leaflet ng-hide="isVisible" defaults="defaults" markers="markers" layers="layers" height="100%" width="100%" maxbounds="maxbounds" ></leaflet>

assets/javascript/angular/app.js

var app = angular.module("litography", ['ngAnimate','ui.router','ngResource', 'templates', 'leaflet-directive', 'cn.offCanvas', 'ui.bootstrap', 'angular-flexslider'])
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    /**
     * Routes and States
     */
    $stateProvider
        .state('home', {
            url: "/",
           views:{
            "splash": {
                templateUrl: "splash.html",
                controller: "SplashCtrl"
            },
            "map":{
                templateUrl: "map.html",
                controller: "MapCtrl",
                resolve:{
                Markers: function(Markers){
                   return Markers
                }
            }
            },
            "menu":{
                templateUrl: "menu.html",
                controller: "MenuCtrl"
            }
           }
        })

    // default fall back route
    $urlRouterProvider.otherwise('/');

    // enable HTML5 Mode for SEO
    $locationProvider.html5Mode(true);
}]);

Answer 1

如果您忘记添加文件，则可能会发生这种情况:leaflet.markercluster.js